/*CONSTRUCTOR */ body {font-family: 'Open Sans', sans-serif; font-weight: 400!important;/* background: url("../img/'337d9ca0.png")*/ background-color: #e0e9ee; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23ecf6fb' stroke-width='4.5' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");} h2.block-title {float: left; width: 100%; padding-bottom: 5px; color: #313456; font-weight: 600; border-bottom: 1px solid #6ba6bc; font-size: 24px;} h4 {color: #313456; font-weight: 700!important;font-size: 18px; text-transform: uppercase} h3 {color: #313456; font-weight: 700!important;font-size: 22px; text-transform: uppercase} .main-content ul { float: left; width: 100%; list-style-position: inside; margin: 0; padding: 0} .main-content hr {} .main-content {font-size: 16px;font-family: 'EB Garamond', serif; font-weight: 500} /*Form Input Elemetns*/ .control-group{display:inline-block;vertical-align:top;background:#fff;text-align:left;height:auto;margin:10px;width:100%}.control{display:block;position:relative;padding-left:30px;margin-bottom:15px;cursor:pointer}.control input{position:absolute;z-index:-1;opacity:0}.control__indicator{position:absolute;top:0;left:0;height:16px;width:16px;background:#fff;border:1px solid #ccc}.control--checkbox .control__indicator{border-radius:3px}.control--radio .control__indicator{border-radius:50%}.control input:focus~.control__indicator,.control:hover input:not([disabled])~.control__indicator{border-color:#666}.control input:checked~.control__indicator{background:#fff}.control input:disabled~.control__indicator{background:#e6e6e6;opacity:.6;pointer-events:none}.control__indicator:after{content:'';position:absolute;display:none}.control input:checked~.control__indicator:after{display:block}.control--checkbox .control__indicator:after{left:5px;top:0;width:5px;height:12px;border:solid #34bb92;border-width:0 2px 2px 0;transform:rotate(45deg)}.control--checkbox input:disabled~.control__indicator:after{border-color:#7b7b7b}.control--radio .control__indicator:after{left:5px;top:5px;height:6px;width:6px;border-radius:50%;background:#34bb92}.control--radio input:disabled~.control__indicator:after{background:#7b7b7b}.select{position:relative;display:inline-block;margin-bottom:15px;width:31%}.select select{display:inline-block;width:100%;cursor:pointer;padding:10px 15px;outline:0;border:0;border-radius:0;background:#e6e6e6;color:#7b7b7b;appearance:none;-webkit-appearance:none;-moz-appearance:none}.select select::-ms-expand{display:none}.select select:focus,.select select:hover{color:#000;background:#ccc}.select select:disabled{opacity:.5;pointer-events:none}.select__arrow{position:absolute;top:16px;right:15px;width:0;height:0;pointer-events:none;border-style:solid;border-width:8px 5px 0 5px;border-color:#7b7b7b transparent transparent transparent}.select select:focus~.select__arrow,.select select:hover~.select__arrow{border-top-color:#000}.select select:disabled~.select__arrow{border-top-color:#ccc} /********************************* HEADER ELEMENTS **********************************/ .header-site {background-color: #fff!important; } /* Top Bar */ .top-bar {color:#666!important; background-color: rgba(255,255,255,0.75); z-index: 1039; -moz-transition: all 0.2s ease-in;-webkit-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;transition: all 0.2s ease-in;font-family: 'EB Garamond', serif; font-weight: bold!important} .top-bar a {color:#313456!important; text-decoration: none; } .top-bar-holder .row {border-bottom: 1px solid #6ba6bc; padding-bottom: 5px; padding-top: 5px; } .lang-social,.main-contacts {font-size:12px!important; text-transform: uppercase} .main-contacts {text-align: right} .lang-social span.langs {margin-right: 5px;} .lang-social span.social {margin-left: 15px;} .lang-social a i {padding: 0 5px; font-size: 14px} .main-contacts span.mailus {margin-left: 5px;} .main-contacts span.callus {margin-left: 15px;} .main-contacts a i {padding: 0 5px; font-size: 14px} /* Main Navigation */ .navbar-toggler-right {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right } .navbar {background-color: rgba(255,255,255,0.75); color: #2c3157; margin-top: 28px; -moz-transition: all 0.2s ease-in;-webkit-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;transition: all 0.2s ease-in; } .navbar a {color:#313456; font-size: 13px; text-transform: uppercase;font-family: 'Playfair Display', serif!important; font-weight: normal} .navbar a:hover {color:#6ba6bc} .navbar-brand img {height: 62px; width: auto} .dropdown-toggle::after {display: none;} .dropdown {} .dropdown-menu {margin-top: 23px; border: none; border-radius: 0; } .text-decoration-none {text-decoration: none!important;} .booking-btn {font-weight: bold; font-size: 18px; float: right; margin-left: 25px; padding: 0px 0px!important;} .booking-btn .nav-link {color: #900; border: 1px solid #800} .nav-link {padding-bottom: 10px!important} .dropdown-item:focus {background-color: rgba(255,255,255,.5);} .nav-active { background-color: #ffffff!important} /* Breadcrumps */ .breadcrumbs {margin-top: 125px; position: relative;background-attachment: fixed;background-size: cover; padding: 100px 0; background-repeat: no-repeat} .breadcrumbs .links {height: 25px; position: absolute; bottom: 10px; width: 100%} .breadcrumbs .links ul {list-style: none; margin: 0; padding: 0} .breadcrumbs .links ul li {float: left} .breadcrumbs .links ul li:after {content: '/'; padding: 0 5px; color: #ddd} .breadcrumbs .links ul li:last-child:after {content:''} .breadcrumbs .links.tworows {bottom: 35px; } .breadcrumbs .links ul li a {text-decoration: none; color: #313456; text-transform: uppercase; font-size: 12px; font-family: 'Playfair Display', serif!important; font-weight: bold!important} .breadcrumbs .links ul li a:hover {color: #FFF;} .breadcrumbs .page-title {height: 25px; position: absolute; bottom: 50%; width: 100%;} .breadcrumbs .page-title h2 {position: absolute;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%); font-size: 55px; opacity: 1; color: #313456; text-shadow:3px 3px 3px rgba(0, 0, 0, 0.35); text-transform: uppercase;font-family: 'Playfair Display', serif!important; font-weight: bold!important} .breadcrumbs.bg-1 {background-image: url("../img/breadcrumps/breadcrumps-1.jpg")} /* Slider */ .homepageslider .carousel-item { height: 100vh; background-repeat: no-repeat; background-position: center center; background-size: cover; } .homepageslider .carousel-item img { width: 100%; height: 100%; object-fit: cover} .homepageslider .carousel-control-next, .homepageslider .carousel-control-prev { margin-top: 125px} .carousel-caption h5 {font-weight: 800; text-transform: uppercase; font-size:40px; color: #fff; text-shadow: 2px 2px #000;} .carousel-caption h5 a {background-color: #6ba6bc;} .carousel-caption h5 a:hover {background-color: #6ba6bc; color: #fff; box-shadow: none} .carousel-caption a {background-color: #313456; padding: 5px 10px;color: #fff; font-family: 'Playfair Display', serif!important; font-weight: bold!important} .carousel-caption a:hover {text-decoration: none; background-color: #fff; color: #6ba6bc; box-shadow: 2px 2px #000; } .room-specs {} .room-specs .room-beds, .room-specs .room-persons, .room-specs .room-size {border: 2px solid #6ba6bc; margin-bottom: 11px; height: calc(100% / 3 - 7px); padding: 15px; text-align: center; color: #313456} .room-beds i, .room-specs .room-persons i, .room-specs .room-size i {font-size:45px; color: #6ba6bc; text-align: center; width: 100%; margin-bottom: 10px;} .room-beds , .room-specs .room-persons , .room-specs .room-size {color: #313456; text-align: center; text-transform: uppercase; font-weight: bold} #room-gall .carousel-inner {border: 2px solid #6ba6bc;outline-offset: -2px;} .ebox img, .food-blocks img {border: 2px solid #6ba6bc;outline-offset: -2px;} .paralax-booking {background-image: url("../img/booking-paralax.jpg"); background-attachment: fixed; background-position: center center; background-size: cover; padding: 100px 0; background-repeat: no-repeat;} .paralax-booking form {background-color: #fff; padding: 15px; position: relative;-webkit-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.25); -moz-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.25);box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.25);} .paralax-booking form select {background-color: #f5f5f5!important; border: 1px solid #f5f5f5; color: #313456} .paralax-booking form p {margin: 0; padding: 0} .paralax-booking form .button.reservation {position: absolute; height: 100%; background-color: #6ba6bc; top: 0; border: 0; right: 0; padding: 0 50px; color: #fff; font-weight: 600; font-size: 18px;} .paralax-booking form .button.reservation:hover {background-color: #313456;} .paralax-booking .control-group p {font-size:10px!important; text-transform: uppercase} .paralax-booking .control-group p a {color:#6ba6bc; text-decoration: none} .paralax-booking .control-group p a:hover {color:#313456; text-decoration: none} /* Footer */ .footer-site {background-color: #313456!important; font-family: 'Playfair Display', serif!important; font-weight: bold!important} .footer-site hr {border-color: #6ba6bc} .footer-bottom {padding-bottom: 10px!important;} .footer-bottom ul {list-style: none!important; margin: 0; padding: 0} .footer-bottom ul li {float: left; padding: 0; margin: 0} .footer-bottom a {text-decoration: none; font-size: 11px; text-transform: uppercase; margin-right:11px; color: #fff} .footer-bottom a:hover {color: #ddd} .footer-bottom .gdpr { margin-right:5px} .footer-bottom li.extra { position: relative; margin-left: 10px; padding-left: 5px} .footer-bottom li.extra:before {content:''; border-left: solid 1px #ddd; position: absolute; left: -5px;; top: 9px; height:12px} .footer-bottom .webmaster {text-decoration: none; font-size: 10px; text-transform: uppercase; mcolor: #fff; line-height: 25px; text-align: right!important; } .partners {text-align: right} .partners img {margin: 0 10px;} .footer-contacts {font-size: 14px!important; margin-top: 14px; float: left; width: 100%; font-family: 'Playfair Display', serif!important; font-weight: bold!important} .footer-contacts a {color: #6ba6bc; text-decoration: none} .footer-contacts a:hover {color: #ddd} .roombox-1 {position: relative; margin-bottom: 25px;} .roombox-1 a {text-decoration: none; color:#dddddd} .roombox-1 img {position: relative; outline: 2px solid #6ba6bc;outline-offset: -2px;} .roombox-1 span {width: auto; position: absolute; left: 0; margin-left: 25px; bottom: 15px; background-color:#6ba6bc; padding: 2px 10px; font-weight: bold; text-transform: uppercase} .roombox-1:hover img {opacity: 1;-webkit-animation: flash 1.5s;animation: flash 1.5s;} @-webkit-keyframes flash {0% {opacity: .4;}100% {opacity: 1;}}@keyframes flash {0% {opacity: .4;}100% {opacity: 1;}} /* Our Services */ .our-services .col-md-6 {margin-bottom: 50px} .our-services i {width: 100px; margin-right: 40px; font-size: 75px; color: rgba(44, 49, 87, 0.45); float: left; height: 100%; text-align: center} .our-services .text-service {float: right;width: calc(100% - 140px);} .our-services h4 {color:#313456; font-size: 18px; font-weight: 400; padding-bottom: 0; margin-bottom: 5px; } .our-services p {color:#666; font-size: 16px; font-weight: 400; line-height: 20px;} /* Dividers */ .divider {text-align: center;background-image: url('../img/divider-1.png');height: 40px;background-repeat: no-repeat; background-position: center center; margin-top: 55px;} .divider::before, .divider::after {width: calc(50% - 100px);height: 2px;border-top: 1px solid #ddd;display: inline-block;content:''; margin-left: 50px; margin-right: 50px;padding-top: 0.5em;margin-top: 20px;} /* Block Counts */ .our-count {background-color: rgba(44, 49, 87, 0.45); padding:45px 0;} .our-count span {font-weight: bolder; font-size: 42px; color: #fff} .our-count p {padding: 0; margin: 0; color: #fff} .grid:after {content: '';display: block;clear: both;} .grid-sizer, .grid-item {width: 32%;} .grid-item {margin-bottom: 10px;} .grid-item {float: left;} .grid-item img {display: block;max-width: 100%; cursor: pointer; outline: 2px solid #6ba6bc;outline-offset: -2px;} .map { height: 450px;} a.solial-link { padding: 0 5px; font-size: 22px} .contatcs-info a {color:#6ba6bc; font-weight: bold} .contatcs-info a:hover {color:#313456} /*Responsive Rules*/ @media only screen and (max-width: 992px) { .room-specs .room-beds, .room-specs .room-persons, .room-specs .room-size {width: calc(100% / 3 - 5px); float: left; height: 125px; margin-right: 0px; margin-bottom: 0; } .room-specs .room-size {margin-top: 10px} .room-specs .room-persons {margin:0 7px;margin-top: 10px} .room-specs .room-beds {margin-top: 10px} .breadcrumbs .links ul {text-align: center} .breadcrumbs .links ul li {display: inline-block; float: none} .nav-link {text-align: center!important; float: left; width: 100%; padding: 0; padding-bottom: 5px;} .navbar-brand img {height: 55px; width: auto} li.nav-item { margin: 2px 0} .map { height: 350px;} .lang-social,.main-contacts {font-size:14px!important; text-transform: uppercase; font-weight: 600} .lang-social a i {padding: 0 5px; font-size: 16px} .main-contacts a i {padding: 0 5px; font-size: 16px} .home-info.pr-5 { padding-right: 0rem !important} .navbar { margin-top:32px!important} } @media screen and (max-width: 991px) { .booking-btn {font-weight: bold; font-size: 18px; float: none; margin-left: 0px; width: auto; margin: 0 auto;} .booking-btn .nav-link {padding: 5px 10px} .dropdown-menu {box-shadow: none!important; text-align: center; margin-bottom: 25px;} .breadcrumbs {margin-top: 105px;} .breadcrumbs .page-title {height: auto; position: absolute; bottom: 50%; width: 100%; } .breadcrumbs .page-title h2 {position: absolute;top: 0%;-webkit-transform: translateY(-50%);transform: translateY(-50%); font-size: 35px; font-weight: 800; width: 100%; left: 0; text-align: center} .dnone {display:none} .carousel-item:hover {cursor: grab;} .carousel-caption h5 {font-weight: 800; text-transform: uppercase; font-size:30px; color: #fff; text-shadow: 2px 2px #000;} .carousel-caption {right:5%; left: 5%} } @media only screen and (max-width: 768px) { .select {} .select.year, .select.nights {width: 33%!important; float: left; display: block!important} .paralax-booking form .button.reservation {position: relative; height: 50px; background-color: #6ba6bc; top: 0; border: 0; right: 0; padding: 0 50px; color: #fff; font-weight: 600; font-size: 18px;} p.change-reservation {} .footer-bottom ul {text-align: center!important} .footer-bottom ul li {display: inline-block!important; float: none} .footer-bottom a {text-decoration: none; font-size: 10px; text-transform: uppercase; margin-right:10px; color: #fff} .partners {text-align: center} .footer-brand { text-align: center; margin-bottom: 10px;} .footer-bottom .webmaster {text-align: center!important; margin-top: 10px;} .top-bar {text-align: left} .main-contacts {text-align: right; margin-top: 0px;} .room-specs .room-beds, .room-specs .room-persons, .room-specs .room-size { height: auto!important; min-height: 80px} .room-beds i, .room-specs .room-persons i, .room-specs .room-size i {font-size:18px; color: #6ba6bc; text-align: center; width: 100%; margin-bottom: 10px;} .room-beds , .room-specs .room-persons, .room-specs .room-size {color: #313456; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 10px!important} } @media (min-width: 576px) and (max-width: 767px) { .grid-sizer, .grid-item {width: 50%;} } @media (max-width: 575px) { .grid-sizer, .grid-item {width: 100%;} .carousel-caption h5 {font-weight: 800; text-transform: uppercase; font-size:20px; color: #fff; text-shadow: 2px 2px #000; min-height: 55px} .carousel-caption {right:5%; left: 5%; bottom: 5%} } @media (max-width: 480px) { .room-specs .room-beds, .room-specs .room-persons, .room-specs .room-size { height: auto!important; min-height: 100px} .our-services i {margin-right:10px; font-size: 55px; width: 70px;} .our-services .text-service {width: calc(100% - 120px)} }