/* Theme Name: Landing Theme URI: https://insolution.ru Description: Landing page site Author: Insolution Author URI: https://insolution.ru Template: landing Version: 1.0.0 Tags: landing Text Domain: landing */ /* TABLE OF CONTENTS 1. Default Configs 2. Labels 3. Tooltip 4. Top Navbar 5. Teaser Slider 6. Call to Action 7. Features 8. Room Tabs 9. Location 10. Attractions 11. Newsletter 12. Reviews 13. About 14. Counter 15. Rates 16. Services 17. Content 18. Partners 19. Contact 20. Address 21. Footer 22. Scroll Up Button 23. Inquiry Modal 24. Breakpoints / Media Queries 25. Helper Classes 26. Change default Nav Breakpoint */ html { -webkit-font-smoothing: antialiased; } body { font-family: 'Open Sans', sans-serif; color: #585858; line-height: 25px; font-weight: 400; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } /* 1. Default Configs -------------------------------------*/ .content-after-slider { z-index: 10; background-color: #fff; position: relative; } .btn { border-radius: 3px; border: none; padding: 13px 23px; -webkit-transition: all 0.08s ease-in; transition: all 0.08s ease-in; } .btn-color1 { background-color: #2196f3; color: #fff; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .btn-color1:hover { background-color: #1976d2; color: #fff; } .btn-color1:focus { background-color: #1976d2; color: #fff; } .btn-color2 { background-color: #f1f1f1; color: #fff; } .btn-color3 { background-color: #eaf5f7; color: #fff; } .btn-color4 { background-color: #979797; color: #fff; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .btn-color4:hover { background-color: #7d7a7a; color: #fff; } ::-moz-selection { background: #2196f3; color: #ffffff; } ::selection { background: #2196f3; color: #ffffff; } ::-moz-selection { background: #2196f3; color: #ffffff; } .form-control::-webkit-input-placeholder { color: #2196f3; } .form-control:-moz-placeholder { color: #2196f3; opacity: 1; } .form-control::-moz-placeholder { color: #2196f3; opacity: 1; } .form-control:-ms-input-placeholder { color: #2196f3; } .sc-animate { visibility: hidden; } .img-responsive { width: 100%; } .modal-open { padding-right: 0 !important; } .datepicker table tr td.today { background: #2196f3; background-image: none; } /* 2. Labels --------------------------------------------*/ .label { font-size: 80%; font-weight: 600; padding-top: 4px; } .label-default { background-color: #2196f3; } /* 3. Tooltip --------------------------------------------*/ .tooltip .tooltip-inner { background-color: #2196f3; padding: 5px 10px; font-size: 14px; opacity: 1; } .tooltip.top .tooltip-arrow { border-top-color: #2196f3 !important; } .tooltip.left .tooltip-arrow { border-left-color: #2196f3 !important; } .tooltip.right .tooltip-arrow { border-right-color: #2196f3 !important; } .tooltip.bottom .tooltip-arrow { border-bottom-color: #2196f3 !important; } .my-tooltip { border-bottom: 1px dotted #2196f3; color: #2196f3; } /* 4. Top Navbar -------------------------------------*/ .top-navbar { background-color: #fff; min-height: 100px; padding: 0 10px; border-bottom: 5px solid #2196f3; z-index: 15; } .top-navbar .navbar-brand { margin-top: 6px; } .top-navbar .navbar-default { border: none; background-color: #ffffff; } .top-navbar .navbar-default .navbar-nav { margin-top: 25px; margin-right: 0; } .top-navbar .navbar-default .navbar-nav a { color: #4a4a4a; } .top-navbar .navbar-default .navbar-nav .active > a { background-color: #ffffff; font-size: 16px; color: #2196f3; text-decoration: none; } .top-navbar .navbar-default .navbar-nav .active > a:after { content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #2196f3; position: absolute; left: 50%; bottom: -22px; margin-left: -5px; } .top-navbar .navbar-default .navbar-nav .language-select { margin-top: 13px; margin-left: 10px; position: relative; } .top-navbar .navbar-default .navbar-nav .language-select a { border: 1px solid #ebebeb; padding: 5px 15px 5px 8px; color: #585858; text-decoration: none; } .top-navbar .navbar-default .navbar-nav .language-select a img { margin-top: -3px; } .top-navbar .navbar-default .navbar-nav .language-select a i { color: #2196f3; margin-left: 10px; } .top-navbar .navbar-default .navbar-nav .language-select .dropdown-menu-language-select { box-shadow: none; position: absolute; top: 23px; left: 0; right: auto; border-radius: 0; } .top-navbar .navbar-default .navbar-nav .language-select .dropdown-menu-language-select a { border: none; } /* 5. Teaser Slider -------------------------------------*/ .teaser-slider { position: fixed; top: 0; width: 100%; z-index: 0; } .teaser-slider .item { height: 650px; background-color: #f1f1f1; } .teaser-slider .item .carousel-caption { display: none; } .teaser-slider .item img { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 100%; } .teaser-slider .carousel-control { width: 58px; height: 74px; background-image: none; background-color: #2196f3; background-repeat: no-repeat; text-shadow: none; top: 50%; margin-top: -37px; padding-top: 25px; } .teaser-slider-ph { height: 645px; pointer-events: none; background: transparent url('/wp-content/themes/landing/img/transparent.png'); } /* 6. Call to Action -------------------------------------*/ .call-to-action { position: absolute; margin-top: -92px; margin-right: auto; margin-left: auto; left: 0; right: 0; z-index: 1; } .call-to-action .call-to-action-box { height: 173px; padding-top: 36px; border-bottom: 7px solid #2196f3; background-color: #ffffff; position: relative; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .call-to-action .call-to-action-box:hover { border-bottom-color: #1976d2; } .call-to-action .call-to-action-button { border: none; font-size: 19px; padding: 20px 30px 15px; vertical-align: top; } .call-to-action .call-to-action-button i { font-size: 30px; margin: -4px 10px 0 0; display: block; float: left; } .call-to-action .call-to-action-phone { display: block; font-size: 17px; color: #4a4a4a; font-weight: 400; margin-top: 20px; text-decoration: none; } .call-to-action .call-to-action-triangle { width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid #ffffff; position: absolute; left: 50%; top: -30px; margin-left: -30px; } /* 7. Features -------------------------------------*/ .features { padding-top: 160px; padding-bottom: 85px; background-color: #f1f1f1; } .features h2 { text-align: center; font-size: 48px; font-weight: lighter; margin: 0 0 78px 0; padding: 0; color: #4a4a4a; } .features .feature { border-bottom: 7px solid #2196f3; background-color: #fff; padding-top: 34px; text-align: center; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .features .feature .feature-icon { width: 142px; height: 142px; margin: 0 auto; border: 2px solid #2196f3; border-radius: 71px; text-align: center; font-size: 50px; color: #2196f3; line-height: 142px; position: relative; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .features .feature .feature-icon:after { content: ''; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #2196f3; position: absolute; left: 50%; bottom: 0px; margin-left: -4px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .features .feature h3 { margin: 30px 0; padding: 0; font-size: 22px; font-weight: 400; color: #4a4a4a; } .features .feature p { margin: 0 10px 30px 10px; font-size: 14px; } .features .feature:hover { border-bottom-color: #1976d2; } .features .feature:hover .feature-icon { border-color: #1976d2; color: #1976d2; } .features .feature:hover .feature-icon i { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .features .feature:hover .feature-icon:after { border-bottom-color: #1976d2; } /* 8. Room Tabs -------------------------------------*/ .room-tabs { background-color: #ffffff; padding: 80px 0 85px 0; } .room-tabs h2 { font-size: 36px; font-weight: 300; margin-bottom: 35px; color: #4a4a4a; } .room-tabs .room-tabs-info { margin-bottom: 12px; } .room-tabs .room-tabs-info img { float: left; } .room-tabs .nav-tabs { margin-bottom: 47px; font-size: 18px; border-bottom: 7px solid #e3e3e3; } .room-tabs .nav-tabs li { margin-bottom: -7px; border-right: 2px solid #fff; } .room-tabs .nav-tabs li a { margin: 0; color: #4a4a4a; background-color: #fff; border-radius: 0; border-top: none; border-left: none; border-right: none; border-bottom: 7px solid #e3e3e3; } .room-tabs .nav-tabs li a:hover { background-color: rgba(33, 150, 243, 0.3); border-bottom: 7px solid #e3e3e3; } .room-tabs .nav-tabs li.active a { color: #585858; background-color: #fff; border-radius: 0; border-top: none; border-left: none; border-right: none; border-bottom: 7px solid #2196f3; } .room-tabs .room-tabs-gallery .room-tabs-gallery-thumbnails { width: 75px; float: left; } .room-tabs .room-tabs-gallery .room-tabs-gallery-thumbnails a { margin-bottom: 10px; display: block; } .room-tabs .room-tabs-gallery .room-tabs-gallery-image { width: 472px; float: right; } .room-tabs .room-tabs-gallery .room-tabs-gallery-image .room-tabs-gallery-preview-container { height: 365px; overflow: hidden; display: block; position: relative; } .room-tabs .room-tabs-gallery .room-tabs-gallery-caption { position: relative; background-color: #2196f3; color: #fff; border-top: 1px solid #fff; padding: 15px 20px 0 20px; height: 55px; font-size: 14px; z-index: 20; } .room-tabs .room-tabs-gallery .room-tabs-gallery-caption .btn-room-check { float: right; background-color: #2196f3; border: 1px solid #fff; font-size: 14px; margin-top: -5px; font-weight: 400; padding: 6px 12px; } .room-tabs .room-tabs-gallery .room-tabs-gallery-caption .btn-room-check i { margin-right: 5px; } .room-tabs .room-tabs-gallery .room-tabs-gallery-caption .btn-room-check:hover { background-color: #1976d2; color: #fff; } .room-tabs .room-tabs-gallery .room-tabs-gallery-caption:before { content: ''; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 16px solid #fff; position: absolute; left: 50%; top: -16px; margin-left: -16px; } .room-tabs .room-tabs-gallery .room-tabs-gallery-caption:after { content: ''; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #2196f3; position: absolute; left: 50%; top: -15px; margin-left: -15px; } .room-tabs .room-tabs-description h3 { font-size: 22px; color: #2196f3; margin-bottom: 20px; } .room-tabs .room-tabs-checklist { margin-top: 15px; margin-bottom: 0; } .room-tabs .room-tabs-checklist li { border: none; padding: 0 0 6px 0; font-weight: 600; } .room-tabs .room-tabs-checklist li:last-of-type { padding-bottom: 0; } .room-tabs .room-tabs-checklist li i { color: #2196f3; font-size: 18px; float: left; margin-right: 8px; display: block; margin-top: 6px; } .modal-backdrop.in { opacity: 0.9; background-color: #213437; } #roomTabsGalleryPreviewModal .modal-dialog { z-index: 100; min-width: 300px; margin-top: 100px; } #roomTabsGalleryPreviewModal .modal-dialog .modal-content .modal-nav { position: absolute; top: -42px; width: 100%; color: #fff; } #roomTabsGalleryPreviewModal .modal-dialog .modal-content .modal-nav .title { margin-top: 9px; } #roomTabsGalleryPreviewModal .modal-dialog .modal-content .modal-nav .close { height: 43px; font-size: 32px; font-weight: 700; line-height: 1; color: #fff; opacity: 1; } #roomTabsGalleryPreviewModal .modal-dialog .modal-content .modal-body { padding: 0; } #roomTabsGalleryPreviewModal .modal-dialog .modal-content .modal-body img { border: 1px solid #fff; } /* 9. Location -------------------------------------*/ .location .location-map-container { height: 500px; } .location .location-address { background-color: #2196f3; color: #fff; font-size: 20px; height: 80px; opacity: 0.9; margin-top: -80px; } .location .location-address address { padding-top: 20px; } .location .location-address i { font-size: 36px; } /* 10. Attractions -------------------------------------*/ .attractions { padding: 80px 0 85px 0; background-color: #fff; } .attractions h2 { text-align: center; font-size: 48px; font-weight: lighter; margin: 0 0 70px 0; padding: 0; color: #4a4a4a; } .attractions p { font-size: 18px; line-height: 30px; font-weight: 300; margin-bottom: 40px; color: #383838; } .attractions .attraction-video { margin-bottom: 30px; border-bottom: 7px solid #2196f3; padding-bottom: 1px; } .attractions .attraction-video .video-preview-img { position: relative; } .attractions .attraction-video .video-preview-img .video-play-button { width: 112px; height: 112px; background-color: #fff; border-radius: 56px; position: absolute; top: 50%; left: 50%; margin: -56px 0 0 -56px; text-align: center; color: #585858; line-height: 112px; font-size: 48px; padding-left: 10px; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .attractions .attraction-video:hover .video-play-button { opacity: 0.5; } .attractions .attraction-link { margin-bottom: 30px; overflow: hidden; } .attractions .attraction-link a .attraction-img { position: relative; } .attractions .attraction-link a .attraction-img img { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .attractions .attraction-link a .attraction-img .attraction-overlay { position: absolute; background-color: rgba(33, 150, 243, 0); border: none; width: 100%; height: 100%; top: 0; text-align: center; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .attractions .attraction-link a .attraction-img .attraction-overlay i { font-size: 46px; color: #fff; position: relative; top: calc(40%); /* 50% - 3/4 of icon height */ opacity: 0; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .attractions .attraction-link a .attraction-caption { position: relative; background-color: #2196f3; color: #fff; border-top: 1px solid #fff; padding: 15px 20px 0 20px; height: 55px; font-size: 14px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .attractions .attraction-link a .attraction-caption .attraction-caption-title { float: left; font-weight: 600; } .attractions .attraction-link a .attraction-caption .attraction-distance { float: right; } .attractions .attraction-link a .attraction-caption:before { content: ''; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 16px solid #fff; position: absolute; left: 50%; top: -16px; margin-left: -16px; } .attractions .attraction-link a .attraction-caption:after { content: ''; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #2196f3; position: absolute; left: 50%; top: -15px; margin-left: -15px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .attractions .attraction-link a:hover .attraction-img img { -webkit-transform: scale(1.24); -ms-transform: scale(1.24); transform: scale(1.24); } .attractions .attraction-link a:hover .attraction-img .attraction-overlay { background-color: rgba(33, 150, 243, 0.7); } .attractions .attraction-link a:hover .attraction-img .attraction-overlay i { opacity: 1; } .attractions .attraction-link a:hover .attraction-caption { background-color: #1976d2; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .attractions .attraction-link a:hover .attraction-caption:after { border-bottom-color: #1976d2; } /* 11. Newsletter -------------------------------------*/ .newsletter { margin-top: 23px; padding-bottom: 172px; } .newsletter .newsletter-box { position: relative; background-color: rgba(33, 150, 243, 0.1); padding: 85px 15px; min-height: 300px; } .newsletter .newsletter-box .newsletter-box-icon { position: absolute; width: 110px; height: 110px; top: -55px; left: 50%; margin-left: -55px; background-color: #fff; border: 2px solid #2196f3; border-radius: 55px; text-align: center; font-size: 50px; color: #2196f3; line-height: 110px; } .newsletter .newsletter-box h3 { font-weight: 300; font-size: 24px; margin-bottom: 35px; text-align: center; color: #4a4a4a; } .newsletter .newsletter-box h3 span { font-weight: 400; color: #2196f3; } .newsletter .newsletter-box .input-group { background-color: #fff; padding: 10px 2px; height: 58px; } .newsletter .newsletter-box .input-group .input-group-addon { background-color: #fff; color: #2196f3; border: none; font-size: 24px; border-right: 1px solid #2196f3; } .newsletter .newsletter-box .input-group .form-control { background-color: #fff; border: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 18px; font-weight: 400; } .newsletter .newsletter-box .newsletter-box-submit { width: 300px; position: absolute; left: 50%; margin-left: -150px; bottom: -85px; } .newsletter .newsletter-box .newsletter-box-submit .newsletter-box-button .btn { height: 50px; font-size: 24px; font-weight: 400; padding: 6px 12px; } .newsletter .newsletter-box .newsletter-box-submit .newsletter-box-button:after { content: ''; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #2196f3; position: absolute; left: 50%; top: -15px; margin-left: -15px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .newsletter .newsletter-box .newsletter-box-submit .newsletter-box-button:hover:after { border-bottom-color: #1976d2; } .newsletter .newsletter-box .newsletter-box-submit .newsletter-box-socialmedia { margin-top: 20px; } .newsletter .newsletter-box .newsletter-box-submit .newsletter-box-socialmedia h4 { font-size: 18px; font-weight: 300; float: left; padding-left: 5px; margin-top: 10px; } .newsletter .newsletter-box .newsletter-box-submit .newsletter-box-socialmedia ul { list-style: none; padding: 0; margin: 0; float: right; } .newsletter .newsletter-box .newsletter-box-submit .newsletter-box-socialmedia ul li { float: left; } .newsletter .newsletter-box .newsletter-box-submit .newsletter-box-socialmedia ul li a { width: 40px; height: 40px; border: 2px solid #2196f3; text-align: center; line-height: 40px; color: #2196f3; display: block; font-size: 19px; border-radius: 20px; margin: 0 5px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .newsletter .newsletter-box .newsletter-box-submit .newsletter-box-socialmedia ul li a:hover { border-color: #1976d2; color: #1976d2; } /* 12. Reviews -------------------------------------*/ .reviews { padding: 80px 0 85px 0; background: #ffffff url("../img/review-background.jpg") no-repeat center fixed; background-size: cover; } .reviews h2 { font-size: 36px; font-weight: 300; color: #4a4a4a; } .reviews .review-controls { text-align: right; } .reviews .carousel-control { position: relative; width: 36px; height: 36px; background-image: none; background-color: #2196f3; background-repeat: no-repeat; text-shadow: none; display: inline-block; border: 1px solid #fff; border-radius: 18px; padding: 0; margin: 23px 0 0 0; text-align: center; opacity: 1; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .reviews .carousel-control i { font-size: 22px; text-shadow: none; line-height: 33px; } .reviews .carousel-control.left i { margin-left: -3px; } .reviews .carousel-control.right i { margin-left: 3px; } .reviews .carousel-control:hover { background-color: #1976d2; } .reviews .carousel-inner { margin-top: 35px; } .reviews .review-box { background-color: #fff; padding: 30px; border-bottom: 7px solid #2196f3; } .reviews .review-box h3 { font-size: 18px; margin: 0 0 20px 0; padding: 0; color: #4a4a4a; } .reviews .review-box .review-person { margin: 30px 0 20px 0; } .reviews .review-box .review-person-image { float: left; border-radius: 42px; } .reviews .review-box .review-person-name { font-size: 24px; margin: 0 0 10px 105px; padding-top: 10px; color: #4a4a4a; } .reviews .review-box .review-person-location { margin-left: 100px; font-size: 17px; color: #2196f3; font-weight: 400; } /* 13. About -------------------------------------*/ .about { padding: 80px 0 85px 0; } .about .about-image { padding-bottom: 1px; border-bottom: 7px solid #2196f3; } .about h2 { color: #4a4a4a; font-size: 36px; font-weight: 300; margin-bottom: 35px; } .about p { font-size: 18px; line-height: 32px; font-weight: 300; color: #383838; } .about .about-signature { margin-top: 35px; } .about .about-signature img { width: auto; } /* 14. Counter -------------------------------------*/ .counter { padding: 85px 0; background-color: #eaf5f7; } .counter .counter-icon { font-size: 64px; color: #2196f3; float: left; display: block; margin-right: 15px; width: 65px; height: 65px; } .counter .counter-number { font-size: 40px; color: #2196f3; margin-left: 80px; padding-top: 10px; padding-bottom: 8px; } .counter .counter-description { font-size: 15px; margin-left: 80px; font-weight: 400; color: #4a4a4a; } /* 15. Rates -------------------------------------*/ .rates { padding: 80px 0 85px 0; } .rates h2 { text-align: center; font-size: 48px; font-weight: lighter; margin: 0 0 85px 0; padding: 0; color: #4a4a4a; } .rates .rate { padding: 0; } .rates .rate-box { border-top: 1px solid #bebebe; border-bottom: 1px solid #bebebe; border-left: 1px solid #bebebe; text-align: center; padding: 30px 20px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .rates .rate-box .rate-icon { color: #cccacc; font-size: 53px; line-height: 0; } .rates .rate-box .rate-icon .stars { font-size: 14px; } .rates .rate-box .rate-description { font-size: 18px; margin: 35px 0; display: block; text-transform: uppercase; color: #4a4a4a; } .rates .rate-box .rate-price { display: inline-block; color: #2196f3; line-height: 1; margin-bottom: 45px; } .rates .rate-box .rate-price .rate-price-currency { font-size: 20px; float: left; display: block; margin-top: 14px; } .rates .rate-box .rate-price .rate-price-amount { font-size: 93px; float: left; display: block; font-weight: 600; } .rates .rate-box .rate-price .rate-price-duration { font-size: 14px; float: left; display: block; margin-top: 70px; } .rates .rate-box .rate-action button { background-color: #2196f3; color: #fff; font-size: 16px; padding: 10px 20px; } .rates .rate-box .rate-action button i { font-size: 27px; margin: 0 7px 0 0; vertical-align: sub; } .rates .rate-box .rate-action button:hover { background-color: #1976d2; } .rates .rate-box:last-of-type { border-right: 1px solid #bebebe; } .rates .rate-box.highlight { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); z-index: 10; background-color: #2196f3; border: none; } .rates .rate-box.highlight .rate-icon { color: #eaf5f7; } .rates .rate-box.highlight .rate-description { color: #fff; } .rates .rate-box.highlight .rate-price { color: #fff; } .rates .rate-box.highlight .rate-action button { border: 2px solid #fff; } .rates .rate-box.highlight + .rate-box { border-left: none; } .rates .rates-payment-info { text-align: center; margin-top: 65px; } .rates .rates-payment-info p { font-size: 20px; display: inline-block; font-weight: 300; margin-right: 10px; } .rates .rates-payment-info img { vertical-align: middle; height: 40px; margin-top: -9px; } /* 16. Services -------------------------------------*/ .services { padding: 80px 0 37px 0; background-color: #f1f1f1; } .services h2 { text-align: center; font-size: 48px; font-weight: lighter; margin: 0 0 88px 0; padding: 0; color: #4a4a4a; } .services .service { margin-bottom: 53px; } .services .service .service-icon { width: 60px; height: 60px; margin: -20px auto 0 auto; border: 2px solid #2196f3; border-radius: 31px; text-align: center; font-size: 22px; color: #2196f3; line-height: 57px; position: relative; float: left; } .services .service .service-icon:after { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #2196f3; position: absolute; left: 50%; bottom: 0px; margin-left: -6px; } .services .service h3 { margin: 0 0 6px 77px; font-size: 20px; font-weight: 400; color: #4a4a4a; } .services .service p { margin: 0 0 0 77px; } /* 17. Content -------------------------------------*/ .content { padding: 80px 0 85px 0; } .content h2 { font-size: 36px; font-weight: 300; margin-bottom: 30px; color: #4a4a4a; } .content h3 { margin-bottom: 25px; font-size: 20px; color: #2196f3; font-weight: normal; line-height: 1.6; } .content p { margin-bottom: 25px; } .content p:last-of-type { margin-bottom: 0; } .content .btn { font-weight: 600; } .content .content-img-box { padding-bottom: 1px; border-bottom: 7px solid #2196f3; } .content .content-img-left, .content .content-img-right { margin-bottom: 85px; } .content .content-img-left:last-of-type, .content .content-img-right:last-of-type { margin-bottom: 0; } /* 18. Partners -------------------------------------*/ .partners { background-color: #f1f1f1; } .partners .partners-container { padding: 45px 15px 80px 15px; } .partners .partner-img { padding: 5px; background-color: #fff; } .partners h2 { font-size: 14px; margin: 0 0 25px 0; color: #2196f3; } /* 19. Contact -------------------------------------*/ .contact { padding: 80px 0 85px 0; } .contact h2 { font-size: 36px; font-weight: 300; margin-bottom: 20px; color: #4a4a4a; } .contact h3 { margin-bottom: 25px; font-size: 20px; font-weight: 600; color: #2196f3; } .contact .contact-header { margin-bottom: 45px; padding-bottom: 22px; border-bottom: 1px solid #dcdcdc; } .contact .contact-img { float: left; margin-right: 20px; padding: 1px; border: 2px solid #d0cccc; width: 83px; } .contact .contact-person { font-size: 20px; font-weight: 600; } .contact .contact-title { font-weight: 400; } .contact .contact-phone { font-size: 20px; font-weight: 600; color: #2196f3; margin-top: 8px; } .contact .contact-phone i { font-size: 30px; margin-right: 10px; display: block; float: left; margin-top: -3px; } .contact .input-group { border: 1px solid #f5f5f5; background-color: #f1f1f1; padding: 10px 2px; height: 58px; margin-bottom: 14px; } .contact .input-group .input-group-addon { background-color: #f1f1f1; color: #2196f3; border: none; font-size: 24px; border-right: 1px solid #2196f3; } .contact .input-group .form-control { background-color: #f1f1f1; border: none; box-shadow: none; font-size: 18px; font-weight: 400; } .contact .input-group.textbox { width: 100%; } .contact .input-group.textbox .input-group-addon { height: 44px; width: 55px; display: block; float: left; } .contact .input-group.textbox .input-group-addon i { vertical-align: middle; } .contact .input-group.textbox textarea { float: left; width: 490px; } .contact .contact-form-info { float: left; margin-top: 11px; color: #585858; font-size: 12px; } .contact .btn-contact-form { float: right; font-weight: 600; } .contact .btn-contact-form i { margin-top: -4px; margin-left: 2px; } /* 20. Address -------------------------------------*/ .address { padding: 70px 0 70px 0; background-color: rgba(33, 150, 243, 0.2); text-align: center; } .address h2 { margin-bottom: 15px; } .address address { font-size: 20px; color: #2196f3; margin-bottom: 10px; } .address .address-info { font-size: 20px; font-weight: 300; text-transform: uppercase; color: #4a4a4a; } .address .phones { margin-top: 30px; list-style: none; color: #2196f3; font-size: 24px; padding: 0; } .address .phones li { display: inline-block; padding: 0 15px; } .address .phones li i { font-size: 36px; vertical-align: sub; margin-right: 7px; } /* 21. Footer -------------------------------------*/ footer { background-color: #2196f3; color: #fff; position: relative; min-height: 85px; } footer .footer-copyright { margin-top: 34px; font-size: 18px; font-weight: 300; } footer .footer-social-media { list-style: none; font-size: 24px; margin-top: 30px; } footer .footer-social-media li { display: inline-block; padding: 0 10px; float: right; } footer .footer-social-media a { color: #fff; } footer:after { content: ''; width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid #2196f3; position: absolute; left: 50%; top: -30px; margin-left: -30px; } /* 22. Scroll Up Button -------------------------------------*/ .scroll-up-btn { width: 50px; height: 50px; border: 2px solid #fff; position: fixed; bottom: 44px; right: 64px; display: none; background-color: #2196f3; text-align: center; line-height: 46px; font-size: 24px; z-index: 10; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .scroll-up-btn i { color: #fff; } .scroll-up-btn:hover { background-color: #1976d2; } /* 23. Inquiry Modal -------------------------------------*/ #inquiryModal .modal-dialog { width: 748px; } #inquiryModal .modal-dialog .modal-content { border-radius: 0; box-shadow: none; border: 2px solid #fff; } #inquiryModal .modal-dialog .modal-content .modal-header { color: #fff; background-color: #2196f3; border-bottom: none; } #inquiryModal .modal-dialog .modal-content .modal-header .close { color: #fff; text-shadow: none; opacity: .6; font-size: 27px; margin: 1px 7px 0 0; } #inquiryModal .modal-dialog .modal-content .modal-header .close:hover, #inquiryModal .modal-dialog .modal-content .modal-header .close:focus { text-decoration: none; cursor: pointer; opacity: 1; } #inquiryModal .modal-dialog .modal-content .modal-header .modal-title { font-size: 24px; font-weight: 400; color: #fff; } #inquiryModal .modal-dialog .modal-content .modal-body { padding: 0; } #inquiryModal .modal-dialog .modal-content .modal-body h2 { font-size: 18px; font-weight: 300; color: #2196f3; margin-top: 0; margin-bottom: 20px; } #inquiryModal .modal-dialog .modal-content .modal-body label { font-size: 14px; font-weight: normal; margin-bottom: 0; color: #585858; padding-left: 3px; } #inquiryModal .modal-dialog .modal-content .modal-body .input-group { border: 1px solid #f5f5f5; background-color: #f1f1f1; } #inquiryModal .modal-dialog .modal-content .modal-body .form-control { background-color: #f1f1f1; border: 1px solid #f5f5f5; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 14px; font-weight: 400; height: 47px; padding-left: 10px; border-radius: 0; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date { padding: 25px 30px 0 30px; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .form-control::-webkit-input-placeholder { color: #585858; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .form-control:-moz-placeholder { color: #585858; opacity: 1; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .form-control::-moz-placeholder { color: #585858; opacity: 1; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .form-control:-ms-input-placeholder { color: #585858; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .inquiry-check-in, #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .inquiry-check-out, #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .inquiry-people { margin-bottom: 15px; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .room-select { height: 58px; width: 100%; overflow: hidden; background-color: #f1f1f1; margin-bottom: 30px; margin-top: 15px; position: relative; border: 1px solid #f5f5f5; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .room-select .input-group { width: 100%; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .room-select:after { font-family: FontAwesome; content: '\f13a'; position: absolute; right: 15px; top: 17px; font-size: 24px; color: #2196f3; z-index: 6; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .room-select select { background: transparent; border: 0; border-radius: 0; height: 58px; font-size: 24px; font-weight: 400; -webkit-appearance: none; appearance: none; -moz-appearance: none; -ms-progress-appearance: none; box-shadow: none; color: #2196f3; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .room-select:before { display: block; position: absolute; content: ''; right: 0; top: 0; height: 58px; width: 58px; margin: 0; background: #f1f1f1; z-index: 5; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date select::-ms-expand { display: none; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .date-select { margin-bottom: 10px; float: left; width: 50%; padding-right: 7px; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .time-select { margin-bottom: 10px; float: right; width: 50%; overflow: hidden; position: relative; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .time-select:after { font-family: FontAwesome; content: '\f13a'; position: absolute; right: 18px; bottom: 12px; color: #2196f3; z-index: 6; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .time-select select { background: transparent; line-height: 1; border: 0; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; -ms-progress-appearance: none; box-shadow: none; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .time-select:before { display: block; position: absolute; content: ''; right: 0; bottom: 0; height: 47px; width: 47px; margin: 0; background-color: #f1f1f1; z-index: 5; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .people-select { margin-bottom: 10px; float: left; width: 50%; overflow: hidden; position: relative; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .people-select:after { font-family: FontAwesome; content: '\f13a'; position: absolute; right: 18px; bottom: 12px; color: #2196f3; z-index: 6; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .people-select select { background: transparent; line-height: 1; border: 0; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; -ms-progress-appearance: none; box-shadow: none; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .people-select:before { display: block; position: absolute; content: ''; right: 0; bottom: 0; height: 47px; width: 47px; margin: 0 7px 0 0; background-color: #f1f1f1; z-index: 5; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .input-group-addon { border: none; color: #fff; background-color: #2196f3; font-size: 24px; border-radius: 0; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date label { display: block; } #inquiryModal .modal-dialog .modal-content .modal-body hr { margin-top: 25px; margin-bottom: 35px; } #inquiryModal .modal-dialog .modal-content .modal-body .personal-information { padding: 0px 30px 20px 30px; } #inquiryModal .modal-dialog .modal-content .modal-body .personal-information .first-name-group { float: left; width: 50%; padding-right: 7px; } #inquiryModal .modal-dialog .modal-content .modal-body .personal-information .last-name-group { float: right; width: 50%; padding-left: 7px; } #inquiryModal .modal-dialog .modal-content .modal-body .personal-information .zip-code-group { float: left; width: 30%; padding-right: 7px; } #inquiryModal .modal-dialog .modal-content .modal-body .personal-information .city-group { float: right; width: 70%; padding-left: 7px; } #inquiryModal .modal-dialog .modal-content .modal-body .personal-information .phone-group { float: left; width: 50%; padding-right: 7px; } #inquiryModal .modal-dialog .modal-content .modal-body .personal-information .email-group { float: right; width: 50%; padding-left: 7px; } #inquiryModal .modal-dialog .modal-content .modal-body .newsletter-checkbox { margin: 20px 0; } #inquiryModal .modal-dialog .modal-content .modal-body .newsletter-checkbox input[type="checkbox"] { display: none; } #inquiryModal .modal-dialog .modal-content .modal-body .newsletter-checkbox label { font-size: 18px; font-weight: 300; } #inquiryModal .modal-dialog .modal-content .modal-body .newsletter-checkbox label:before { content: ""; display: inline-block; font-size: 15px; width: 24px; height: 24px; margin-right: 10px; background-color: #2196f3; border-radius: 3px; line-height: 24px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); color: #f3f3f3; text-align: center; float: left; } #inquiryModal .modal-dialog .modal-content .modal-body .newsletter-checkbox input[type=checkbox]:checked + label:before { content: "\2713"; color: #fff; font-size: 26px; text-shadow: none; } #inquiryModal .modal-dialog .modal-content .modal-footer { background-color: rgba(33, 150, 243, 0.1); text-align: left; padding-top: 20px; border-top: none; } #inquiryModal .modal-dialog .modal-content .modal-footer .inquiry-info { font-size: 12px; float: left; padding-left: 15px; } #inquiryModal .modal-dialog .modal-content .modal-footer .inquiry-info p { line-height: 20px; margin-left: 20px; } #inquiryModal .modal-dialog .modal-content .modal-footer .inquiry-info .inquiry-info-sign { font-size: 44px; color: #2196f3; float: left; line-height: 35px; } #inquiryModal .modal-dialog .modal-content .modal-footer .btn-inquiry-submit { float: right; font-size: 16px; background-color: #2196f3; color: #fff; padding: 11px 35px; } /* 24. Breakpoints / Media Queries -------------------------------------*/ /* Large devices (desktops, 1200px and down)*/ @media (max-width: 1200px) { body { line-height: 23px; } /* 4. Top Navbar 1200px -------------------------------------*/ .top-navbar .navbar-default .navbar-nav a { color: #585858; font-size: 13px; } .top-navbar .navbar-default .navbar-nav .active > a { background-color: #ffffff; font-size: 14px; } /* 5. Teaser Slider 1200px -------------------------------------*/ .teaser-slider .item { height: 550px; } .teaser-slider-ph { height: 545px; } /* 6. Call to Action 1200px -------------------------------------*/ .call-to-action .call-to-action-box { height: 170px; border-bottom: 5px solid #2196f3; } .call-to-action .call-to-action-button { color: #ffffff; background-color: #2196f3; border: none; font-size: 17px; padding: 20px 27px 15px; vertical-align: top; } .call-to-action .call-to-action-button i { font-size: 28px; margin: -4px 8px 0 0; } .call-to-action .call-to-action-phone { font-size: 15px; margin-top: 18px; } /* 7. Features 1200px -------------------------------------*/ .features { padding-top: 140px; padding-bottom: 70px; } .features h2 { font-size: 42px; margin: 0 0 65px 0; } .features .feature { border-bottom: 5px solid #2196f3; padding-top: 34px; text-align: center; } .features .feature .feature-icon { width: 120px; height: 120px; border-radius: 60px; font-size: 46px; line-height: 120px; } .features .feature h3 { margin: 26px 0 24px 0; font-size: 19px; } .features .feature p { font-size: 12px; } /* 8. Room Tabs 1200px -------------------------------------*/ .room-tabs { padding-top: 70px; padding-bottom: 70px; } .room-tabs h2 { font-size: 32px; margin-bottom: 25px; } .room-tabs .room-tabs-info { font-size: 12px; } .room-tabs .nav-tabs { margin-bottom: 38px; font-size: 16px; border-bottom: 5px solid #e3e3e3; } .room-tabs .nav-tabs li { margin-bottom: -5px; } .room-tabs .nav-tabs li a { border-bottom: 5px solid #e3e3e3; } .room-tabs .nav-tabs li a:hover { border-bottom: 5px solid #e3e3e3; } .room-tabs .nav-tabs li.active a { border-bottom: 5px solid #2196f3; } .room-tabs .room-tabs-gallery .room-tabs-gallery-thumbnails { width: 65px; } .room-tabs .room-tabs-gallery .room-tabs-gallery-image { width: 380px; } .room-tabs .room-tabs-gallery .room-tabs-gallery-image .room-tabs-gallery-preview-container { height: 295px; } .room-tabs .room-tabs-gallery .room-tabs-gallery-caption { font-size: 13px; } .room-tabs .room-tabs-description { font-size: 12px; } .room-tabs .room-tabs-description h3 { font-size: 20px; margin-bottom: 18px; } .room-tabs .room-tabs-checklist li { padding: 0 0 5px 0; } .room-tabs .room-tabs-checklist li i { font-size: 16px; margin-right: 7px; margin-top: 4px; } /* 10. Attractions 1200px -------------------------------------*/ .attractions { padding-top: 70px; padding-bottom: 70px; } .attractions h2 { font-size: 42px; margin: 0 0 55px 0; } .attractions p { font-size: 16px; line-height: 30px; margin-bottom: 30px; } .attractions .attraction-link a .attraction-caption { font-size: 12px; } /* 11. Newsletter 1200px -------------------------------------*/ .newsletter { padding-bottom: 157px; } .newsletter .newsletter-box h3 { font-size: 20px; } /* 12. Reviews 1200px -------------------------------------*/ .reviews { padding-top: 70px; padding-bottom: 70px; } .reviews h2 { font-size: 32px; } .reviews .carousel-control { margin: 5px 0 0 0; } .reviews .carousel-inner { margin-top: 35px; } .reviews .review-box { border-bottom: 5px solid #2196f3; font-size: 12px; } .reviews .review-box h3 { font-size: 16px; margin: 0 0 22px 0; } .reviews .review-box .review-person { margin: 30px 0 20px 0; } .reviews .review-box .review-person-image { float: left; border-radius: 35px; width: 70px; } .reviews .review-box .review-person-name { font-size: 20px; margin: 0 0 10px 90px; padding-top: 10px; } .reviews .review-box .review-person-location { margin-left: 85px; font-size: 16px; } /* 13. About 1200px -------------------------------------*/ .about { padding-top: 70px; padding-bottom: 70px; } .about .about-image { border-bottom: 5px solid #2196f3; } .about h2 { font-size: 32px; margin-bottom: 23px; } .about p { font-size: 16px; line-height: 28px; } .about .about-signature { margin-top: 25px; width: 200px; } /* 14. Counter 1200px -------------------------------------*/ .counter { padding-top: 70px; padding-bottom: 70px; } .counter .counter-icon { font-size: 60px; } .counter .counter-number { font-size: 36px; } .counter .counter-description { font-size: 14px; } /* 15. Rates 1200px -------------------------------------*/ .rates { padding-top: 70px; padding-bottom: 70px; } .rates h2 { font-size: 42px; margin: 0 0 65px 0; } .rates .rate-box .rate-icon { color: #cccacc; font-size: 53px; line-height: 0; } .rates .rate-box .rate-icon .stars { font-size: 14px; } .rates .rate-box .rate-description { font-size: 16px; } .rates .rate-box .rate-price .rate-price-currency { font-size: 20px; } .rates .rate-box .rate-price .rate-price-amount { font-size: 83px; } .rates .rate-box .rate-price .rate-price-duration { font-size: 14px; } .rates .rate-box .rate-action button { font-size: 14px; padding: 10px 20px; } .rates .rate-box .rate-action button i { font-size: 22px; margin: 0 7px 0 0; } .rates .rates-payment-info { margin-top: 55px; } .rates .rates-payment-info p { font-size: 18px; margin-right: 10px; } .rates .rates-payment-info img { height: 30px; } /* 16. Services 1200px -------------------------------------*/ .services { padding-top: 70px; padding-bottom: 37px; } .services h2 { font-size: 42px; margin: 0 0 65px 0; } .services .service { margin-bottom: 33px; } .services .service .service-icon { width: 55px; height: 55px; margin: -20px auto 0 auto; border: 2px solid #2196f3; border-radius: 31px; text-align: center; font-size: 20px; color: #2196f3; line-height: 54px; position: relative; float: left; } .services .service .service-icon:after { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #2196f3; position: absolute; left: 50%; bottom: 0px; margin-left: -6px; } .services .service h3 { margin: 0 0 6px 70px; font-size: 18px; } .services .service p { margin: 0 0 0 70px; font-size: 12px; } /* 17. Content 1200px -------------------------------------*/ .content { padding-top: 70px; padding-bottom: 70px; } .content h2 { font-size: 32px; margin-bottom: 20px; } .content h3 { margin-bottom: 15px; font-size: 18px; line-height: 1.6; } .content p { margin-bottom: 15px; font-size: 12px; } .content p .btn { font-size: 13px; } .content .content-img-left, .content .content-img-right { margin-bottom: 70px; } /* 18. Partners 1200px -------------------------------------*/ .partners h2 { font-size: 12px; } .partners .partners-container { padding: 32px 15px 70px 15px; } /* 19. Contact 1200px -------------------------------------*/ .contact { padding-top: 70px; padding-bottom: 70px; } .contact h2 { font-size: 32px; margin-bottom: 25px; } .contact h3 { margin-bottom: 25px; font-size: 18px; } .contact .input-group { padding: 6px 2px; height: 50px; margin-bottom: 12px; } .contact .input-group .input-group-addon { font-size: 22px; } .contact .input-group .form-control { font-size: 16px; } .contact .input-group.textbox .input-group-addon { height: 36px; width: 54px; } .contact .input-group.textbox textarea { width: 394px; height: 223px; } /* 20. Address 1200px -------------------------------------*/ .address { padding-top: 70px; background-position: 70px; } .address h2 { margin-bottom: 15px; } .address address { font-size: 18px; margin-bottom: 8px; } .address .address-info { font-size: 18px; } .address .phones { margin-top: 35px; font-size: 22px; } .address .phones li i { font-size: 34px; } /* 21. Footer 1200px -------------------------------------*/ footer .footer-copyright { font-size: 16px; } footer .footer-social-media { font-size: 22px; margin-top: 34px; } } /* Medium devices (desktops, 992px and down) */ @media (max-width: 992px) { body { text-align: center; } /* 4. Top Navbar 992px -------------------------------------*/ .top-navbar { width: 100%; } .top-navbar .navbar-brand { margin-top: 5px; margin-left: -10px; } .top-navbar .navbar-default .navbar-collapse { border: none; } .top-navbar .navbar-default .navbar-toggle { margin-top: 30px; margin-right: 0; } .top-navbar .navbar-default .navbar-nav { margin-top: 25px; margin-right: 0; } .top-navbar .navbar-default .navbar-nav li { border-bottom: 1px solid #2196f3; } .top-navbar .navbar-default .navbar-nav li:last-of-type { border-bottom: none; } .top-navbar .navbar-default .navbar-nav .active > a { background-color: #eaf5f7; } .top-navbar .navbar-default .navbar-nav .active > a:after { border: none; } /* 6. Call to Action 992px -------------------------------------*/ .call-to-action { width: 326px; } /* 7. Features 992px -------------------------------------*/ .features .feature { margin-bottom: 35px; } /* 8. Room Tabs 992px -------------------------------------*/ .room-tabs .room-tabs-info img { float: none; margin-bottom: 25px; } .room-tabs .nav-tabs { text-align: center; } .room-tabs .nav-tabs li { display: inline-block; float: none; } .room-tabs .room-tabs-gallery { margin-bottom: 35px; } .room-tabs .room-tabs-gallery .room-tabs-gallery-thumbnails { width: 100%; float: none; display: block; min-height: 75px; text-align: center; } .room-tabs .room-tabs-gallery .room-tabs-gallery-thumbnails a { margin-right: 10px; display: inline-block; width: 75px; } .room-tabs .room-tabs-gallery .room-tabs-gallery-image { width: 100%; float: none; } .room-tabs .room-tabs-gallery .room-tabs-gallery-image .room-tabs-gallery-preview-container { height: 80%; } .room-tabs .room-tabs-gallery .room-tabs-gallery-caption { text-align: left; } .room-tabs .room-tabs-gallery .room-tabs-gallery-caption .btn-room-check { float: right; } .room-tabs .room-tabs-checklist.left { text-align: right; } .room-tabs .room-tabs-checklist.left li i { float: right; margin: 7px 0 0 5px; } .room-tabs .room-tabs-checklist.right { text-align: left; } .room-tabs .room-tabs-checklist.right li i { float: left; margin: 7px 5px 0 0; } /* 11. Newsletter 992px -------------------------------------*/ .newsletter { padding-bottom: 150px; } .newsletter .newsletter-box { min-height: 270px; } .newsletter .newsletter-box .newsletter-box-icon { width: 100px; height: 100px; top: -50px; margin-left: -50px; border-radius: 50px; font-size: 46px; line-height: 100px; } .newsletter .newsletter-box h3 { font-size: 16px; } .newsletter .newsletter-box .input-group { padding: 7px 2px; height: 48px; } .newsletter .newsletter-box .input-group .input-group-addon { font-size: 22px; } .newsletter .newsletter-box .input-group .form-control { font-size: 16px; } .newsletter .newsletter-box .newsletter-box-submit { width: 280px; position: absolute; left: 50%; margin-left: -140px; bottom: -80px; } .newsletter .newsletter-box .newsletter-box-submit .newsletter-box-button .btn { height: 45px; font-size: 22px; } .newsletter .newsletter-box .newsletter-box-submit .newsletter-box-socialmedia { margin-top: 20px; } .newsletter .newsletter-box .newsletter-box-submit .newsletter-box-socialmedia h4 { font-size: 16px; margin-top: 13px; } /* 12. Reviews 992px -------------------------------------*/ .reviews .review-controls { text-align: center; margin-top: 35px; } .reviews .review-box { margin-bottom: 35px; } .reviews .review-box .review-person-image { float: none; border-radius: 42px; } .reviews .review-box .review-person-name { margin: 0 0 10px 0px; } .reviews .review-box .review-person-location { margin-left: 0px; } /* 13. About 992px -------------------------------------*/ .about .about-image { margin-bottom: 35px; } .about .about-signature { margin: 35px auto 0; } /* 17. Counter 992px -------------------------------------*/ .counter .counter-icon { float: none; margin: 0 auto; } .counter .counter-number { margin-left: 0; } .counter .counter-description { margin-left: 0; } /* 15. Rates 992px -------------------------------------*/ .rates { padding-left: 25px; padding-right: 25px; } .rates .rate-box { border: 1px solid #bebebe !important; margin-bottom: 35px; width: 90%; margin-left: auto; margin-right: auto; } .rates .rate-box.highlight { border: none !important; -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); } /* 16. Services 992px -------------------------------------*/ .services .service-row { margin-bottom: 0; } .services .service { margin-bottom: 35px; } .services .service .service-icon { width: 55px; height: 55px; margin: 0 auto 20px auto; border: 2px solid #2196f3; border-radius: 31px; text-align: center; font-size: 20px; color: #2196f3; line-height: 54px; position: relative; float: none; } .services .service .service-icon:after { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #2196f3; position: absolute; left: 50%; bottom: 0px; margin-left: -6px; } .services .service h3 { margin: 0 0 6px 0; } .services .service p { margin: 0; } /* 17. Content 992px -------------------------------------*/ .content p:last-of-type { margin-bottom: 30px; } .content .content-img-left, .content .content-img-right { margin-bottom: 40px; } .content .content-img:last-of-type { margin-bottom: 35px; } /* 18. Partners 992px -------------------------------------*/ .partners .partner { margin-bottom: 25px; } /* 19. Contact 992px -------------------------------------*/ .contact .contact-img { float: none; margin: 0 auto 25px; } .contact .contact-phone i { display: inline-block; float: none; } .contact .input-group.textbox textarea { width: 655px; } /* 21. Footer 992px -------------------------------------*/ footer .footer-copyright { font-size: 14px; } footer .footer-social-media { padding: 0; margin-top: 25px; margin-bottom: 35px; } footer .footer-social-media li { display: inline-block; float: none; } /* 23. Inquiry Modal 992px -------------------------------------*/ #inquiryModal .modal-dialog .modal-content .modal-body { text-align: left; } } /* Small devices (768px and down) */ @media (max-width: 768px) { /* 5. Teaser Slider 768px -------------------------------------*/ .teaser-slider .item { height: 430px; } .teaser-slider-ph { height: 425px; } /* 7. Features 768px -------------------------------------*/ .features h2 { font-size: 28px; } /* 8. Room Tabs 768px -------------------------------------*/ .room-tabs h2 { font-size: 24px; } .room-tabs .nav-tabs { font-size: 14px; } .room-tabs .room-tabs-description h3 { font-size: 18px; } .room-tabs .room-tabs-checklist { margin-bottom: 0; margin-top: 0; } .room-tabs .room-tabs-checklist li { background-color: #eaf5f7; margin-bottom: 2px; } .room-tabs .room-tabs-checklist.left { text-align: center; } .room-tabs .room-tabs-checklist.left li i { float: none; display: none; } .room-tabs .room-tabs-checklist.right { text-align: center; } .room-tabs .room-tabs-checklist.right li i { float: none; display: none; } /* 9. Location 768px -------------------------------------*/ .location .location-address { font-size: 16px; height: 60px; margin-top: -60px; } .location .location-address i { font-size: 17px; } /* 10. Attractions 768px -------------------------------------*/ .attractions h2 { font-size: 28px; } .attractions p { font-size: 14px; line-height: 26px; } /* 11. Newsletter 768px -------------------------------------*/ .newsletter .newsletter-box { padding: 85px 15px 70px; } .newsletter .newsletter-box h3 { font-size: 16px; line-height: 30px; } .newsletter .newsletter-box .input-group { margin: 0 20px 20px 20px; } /* 12. Reviews 768px -------------------------------------*/ .reviews h2 { font-size: 24px; } /* 13. About -------------------------------------*/ .about h2 { font-size: 24px; } .about p { font-size: 14px; line-height: 26px; } /* 14. Counter 768px -------------------------------------*/ .counter .counter-box { margin-bottom: 35px; } /* 15. Rates 768px -------------------------------------*/ .rates h2 { font-size: 28px; } .rates .rates-payment-info img { margin-top: 0; } /* 16. Services 768px -------------------------------------*/ .services h2 { font-size: 28px; } /* 17. Content 768px -------------------------------------*/ .content h2 { font-size: 24px; } .content h3 { font-size: 18px; } /* 19. Contact 768px -------------------------------------*/ .contact h2 { font-size: 28px; } .contact h3 { font-size: 16px; } .contact .input-group.textbox textarea { width: 85%; } /* 20. Address 768px -------------------------------------*/ .address address { font-size: 16px; } .address .address-info { font-size: 16px; line-height: 26px; } .address .phones { font-size: 18px; margin-top: 25px; } .address .phones li { margin-bottom: 5px; } .address .phones li i { font-size: 36px; vertical-align: sub; margin-right: 7px; } /* 23. Inquiry Modal 768px -------------------------------------*/ .modal { padding: 0 !important; margin: 0 !important; } #inquiryModal .modal-dialog { width: 100%; margin: 0; } #inquiryModal .modal-dialog .modal-content { border: 0; } #inquiryModal .modal-dialog .modal-content .modal-header { text-align: left; } #inquiryModal .modal-dialog .modal-content .modal-body { text-align: left; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .date-select { float: none; width: 100%; padding-right: 0px; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .time-select { float: none; width: 100%; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .people-select { float: none; width: 100%; } #inquiryModal .modal-dialog .modal-content .modal-body .personal-information .first-name-group { float: none; width: 100%; padding-right: 0px; } #inquiryModal .modal-dialog .modal-content .modal-body .personal-information .last-name-group { float: none; width: 100%; padding-left: 0px; } #inquiryModal .modal-dialog .modal-content .modal-body .personal-information .zip-code-group { float: none; width: 100%; padding-right: 0px; } #inquiryModal .modal-dialog .modal-content .modal-body .personal-information .city-group { float: none; width: 100%; padding-left: 0px; } #inquiryModal .modal-dialog .modal-content .modal-body .personal-information .phone-group { float: none; width: 100%; padding-right: 0px; } #inquiryModal .modal-dialog .modal-content .modal-body .personal-information .email-group { float: none; width: 100%; padding-left: 0px; } #inquiryModal .modal-dialog .modal-content .modal-footer .inquiry-info { float: none; padding-left: 0px; text-align: center; } #inquiryModal .modal-dialog .modal-content .modal-footer .btn-inquiry-submit { float: none; width: 100%; text-align: center; } } /* Extra Small devices (480px and down) */ @media (max-width: 480px) { /* 5. Teaser Slider 480px -------------------------------------*/ /* 19. Contact 480px -------------------------------------*/ .contact .input-group.textbox textarea { width: 82%; } .contact .contact-form-info { float: none; text-align: center; } .contact .btn-contact-form { float: none; width: 100%; } /* 8. Room Tabs 480px -------------------------------------*/ .room-tabs .nav-tabs { border: none; } .room-tabs .nav-tabs li { display: block; margin-bottom: 0; } .room-tabs .room-tabs-gallery .room-tabs-gallery-caption { text-align: center; height: 110px; } .room-tabs .room-tabs-gallery .room-tabs-gallery-caption .btn-room-check { float: none; display: block; width: 100%; margin-top: 10px; } /* 9. Location 480px -------------------------------------*/ .location .location-address { font-size: 12px; font-weight: 600; } } /* 25. Helper Classes */ .text-light { font-weight: 300; } .mt5 { margin-top: 5px; } .mt10 { margin-top: 10px; } .mt15 { margin-top: 15px; } .mt20 { margin-top: 20px; } .mt25 { margin-top: 25px; } .mr5 { margin-right: 5px; } .mr10 { margin-right: 10px; } .mr15 { margin-right: 15px; } .mr20 { margin-right: 20px; } .mr25 { margin-right: 25px; } .mb5 { margin-bottom: 5px; } .mb10 { margin-bottom: 10px; } .mb15 { margin-bottom: 15px; } .mb20 { margin-bottom: 20px; } .mb25 { margin-bottom: 25px; } .ml5 { margin-left: 5px; } .ml10 { margin-left: 10px; } .ml15 { margin-left: 15px; } .ml20 { margin-left: 20px; } .ml25 { margin-left: 25px; } /* 26. Change default Nav Breakpoint */ @media (max-width: 992px) { .navbar-header { float: none; } .navbar-left, .navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .navbar-fixed-top { top: 0; } .navbar-collapse.collapse { display: none !important; } .navbar-nav { float: none !important; margin-top: 7.5px; } .navbar-nav > li { float: none; } .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; } .collapse.in { display: block !important; } } /* moi-css*/ .nav { font-size: 14px; } .btn-bron { display: block; background: #2196f3; width: 30px; height: 30px; border-radius: 20px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); } .btn-bron:hover { box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); } a .btn-bron { text-decoration: none; color: #fff; font-size: 18px; text-align: center; } .btn-bron i { margin-top: 8px; } li.bron a { padding: 0; padding-top: 11px; padding-left: 7px; } .call-to-action-phone strong { font-size: 20px; } .features { padding-top: 100px; padding-bottom: 0px; } .room-tabs .room-tabs-gallery .room-tabs-gallery-caption strong { font-size: 18px; } .onas h1 { margin-bottom: 20px; } .onas { padding: 50px 0; } .room-tabs { background-color: #ffffff; padding: 45px 0 50px 0; } .features .feature { border-bottom: 7px solid #2196f3; padding-top: 14px; } .features .feature .feature-icon { width: 100px; height: 100px; border: 2px solid #2196f3; border-radius: 71px; font-size: 45px; line-height: 100px; } .features .feature h3 { margin: 10px 0; padding: 0; font-size: 18px; } .features .feature p { margin: 0 10px 10px 10px; font-size: 14px; } .features h2 { font-size: 42px; margin: 0 0 50px 0; } .room-tabs h2 { margin-bottom: 15px; } .attractions h2 { text-align: left; font-size: 36px; font-weight: 300; margin-bottom: 35px; color: #4a4a4a; } .attractions { padding: 50px 0 50px 0; background-color: #fff; } .sales { padding: 50px 0; background-color: rgba(33, 150, 243, 0.2); } .yslygi h2 { text-align: left; font-size: 36px; font-weight: 300; margin-bottom: 45px; } .newsletter { padding-bottom: 70px; } .services { padding: 50px 0 0px 0; background-color: #fff; } .reviews { padding: 50px 0 50px 0; background: #ffffff url("../img/review-background.jpg") no-repeat center fixed; background-size: cover; } .phones li a { color: #2196f3; } .contact { padding: 50px 0 50px 0; } .address { padding: 50px 0 50px 0; } .location .location-address { font-size: 16px; width: 90%; } footer .footer-copyright { font-size: 14px; } footer .footer-social-media-div { padding-right: 100px; } .onas h1 { font-size: 26px; font-weight: bold; /*color: #2196f3;*/ } /* #sc-rooms h2, #sc-foto h2, #sc-services h2, #sc-otzuv h2 { color: #2196f3; } */ #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .room-select select { color: #A94442; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .room-select:before, #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .people-select:before, #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .time-select:before { z-index: -1; } #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .room-select:after, #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .people-select:after, #inquiryModal .modal-dialog .modal-content .modal-body .room-and-date .time-select:after { z-index: 0; } .reviews .review-box .review-person { margin: 0; } .reviews .review-box .review-person-name { margin: 0; padding:0; } .reviews .review-box .review-person-location { margin: 0; } .reviews .review-box { padding:20px; } .reviews .review-box .review-person-name { font-size: 20px; } .call-to-action .call-to-action-phone { font-size: 20px; font-weight: 900; } .newsletter-box-button .ajax-loader{ display: none; } .tabl-prices h3 { font-size: 22px; color: #2196f3; margin-bottom: 20px; } .tabl-prices table tr:hover { background: rgba(33, 150, 243, 0.2); } .tr-select { background: rgba(33, 150, 243, 0.2); } .room-tabs .nav-tabs li a { height: 57px; }