body,
html { width: 100%; height: 100%;}

body {font-family: 'Source Sans Pro';}

p {font-size:1.2rem;}

.btn-xl { padding: 1.25rem 2.5rem;}
.content-section { padding-top: 4rem; padding-bottom: 4rem;}
.content-section-heading h2 { font-size: 3rem;}
.content-section-heading h3 { font-size: 1rem; text-transform: uppercase;}

h1, h2,
h3, h4,
h5, h6 {font-weight: 700; letter-spacing:1px; font-family: 'Montserrat', sans-serif; }

.text-faded { color: rgba(255, 255, 255, 0.7);}
#items p.item {font-family: 'Montserrat', sans-serif;}

/* hr */
hr.star-light,
hr.star-dark {  max-width: 16rem;  padding: 0;  text-align: center;  border: none;  border-top: solid 0.25rem;  margin-top: 2.5rem;  margin-bottom: 2.5rem;  
	margin-left: auto;  margin-right: auto;}
hr.star-light:after,
hr.star-dark:after {  position: relative;  top: -.8em;  display: inline-block; content: url(../img/hr-bg.png); font-family: FontAwesome;  font-size: 2em;}
hr.star-light { border-color: #fff;}
hr.star-light:after { color: #fff;  background-color: #88bcc3;}
hr.star-dark {  border-color: #0287c8;}
hr.star-dark:after { color: #0287c8;  background-color: #fff;}

/* Map */
.map {  height: 30rem;}
.map iframe { pointer-events: none;}

.scroll-to-top { position: fixed;  right: 15px; bottom: 15px; display: none; width: 50px; height: 50px; text-align: center; color: white; background: rgba(52, 58, 64, 0.5); line-height: 45px;}
.scroll-to-top:focus, .scroll-to-top:hover { color: white;}
.scroll-to-top:hover { background: #343a40;}
.scroll-to-top i { font-weight: 800;}

.masthead { position: relative; display: table; width: 100%; height: auto;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-masthead.jpg");
  background-position: center center; background-repeat: no-repeat; background-size: cover; text-shadow:1px 1px 1px rgba(0,0,0,0.5);}
.masthead h2 {  font-size: 3rem;  margin: 0; padding: 0; font-weight:900; text-shadow:1px 1px 1px #333;font-family: 'Lora', serif;}
.masthead h4 {font-family: 'Lora', serif;}
.template-booking-banner h2 {  font-size: 2rem;  margin: 0; padding: 0; font-weight:400; text-shadow:1px 1px 1px #333;font-family: 'Lora', serif;}

@media (min-width: 992px) {
  .masthead { height: 100vh; }
  .masthead h1 { font-size: 5.5rem;}
}

/* slideshow and booking-banner */
.main-slideshow {height:100vh; width:100%;}
.main-slideshow img {height:100vh; width:100%; object-fit:cover; }
.booking-banner {position:absolute; left:0; right:0; top:400px; margin:auto; }
.main-slideshow .caption {background: url(../img/icon_camera.png) no-repeat center left; padding-left:20px; }

@media only screen and (max-width:992px) {
h1 {font-size:1.5rem;}
.masthead h2 {  font-size: 2rem; }
.main-slideshow {height:400px; width:100%;}
.main-slideshow img {height:400px; width:100%; object-fit:cover; }
.booking-banner {position:absolute; left:0; right:0; top:100px; margin:auto; }
}

.template-header {height:400px;}
.template-header .template-banner {height:400px; width:100%;}
.template-header .template-banner img {height:400px; width:100%; object-fit:cover; }
.template-booking-banner {position:relative;}
.template-title { display:none;}

@media only screen and (max-width:992px) {
.template-header {height:200px;}
.template-header .template-banner {height:200px; width:100%;}
.template-header .template-banner img {height:200px; width:100%; object-fit:cover; }
.template-title { display:block; position:absolute; top:80px; left:0; right:0; margin:0 auto; font-family: 'Lora', serif; color:#fff; text-align:center;}
.template-booking-banner h2 { font-size: 1rem; }
}

/* Side Menu */
#sidebar-wrapper { position: fixed; z-index: 2; right: 0; width: 250px;  height: 100%;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  transform: translateX(250px);
  background: #0287c8;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-nav { position: absolute; z-index:999;  top: 0; width: 250px; margin: 0; padding: 0; list-style: none;}
.sidebar-nav li.sidebar-nav-item a { display: block; text-decoration: none; color: #fff; padding: 10px; padding-left:15px;}
.sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255, 255, 255, 0.2);}
.sidebar-nav li a:active,
.sidebar-nav li a:focus { text-decoration: none;}
.sidebar-nav > .sidebar-brand { font-size: 1.2rem; background: rgba(52, 58, 64, 0.1); height: 80px; line-height: 50px; padding-top: 15px; padding-bottom: 10px; padding-left: 10px;}
.sidebar-nav > .sidebar-brand a { color: #fff;}
.sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none;}
#sidebar-wrapper.active { right: 250px;  width: 250px;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.sidebar-nav .submenu {display:block; padding:0; padding-left:10px; }
.sidebar-nav .submenu li {list-style:none;}
.menu-toggle { position: fixed; right: 15px; top: 15px; width: 50px; height: 50px; text-align: center; color: #fff; background: rgba(52, 58, 64, 0.5); line-height: 50px; z-index: 999;}
.menu-toggle:focus, .menu-toggle:hover { color: #fff;}
.menu-toggle:hover { background: #343a40;}

/* facilities icons */
.service-icon { background-color: #fff; color: #0287c8; height: 8rem; width: 8rem; display: block; line-height: 7.5rem; font-size: 2.25rem; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);}
.callout {  padding: 15rem 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-callout.jpg");
  background-position: center center; background-repeat: no-repeat; background-size: cover;}
.callout h2 { font-size: 3.5rem; font-weight: 700; display: block;  max-width: 30rem;}
.icon-img {height:60px;}
.weather-widget {position:absolute; min-width:200px; top:70px; left:20px; }
#link_get_widget {display:none;}

/* boxes */
.portfolio-item { display: block; position: relative; overflow: hidden; max-width: 530px; margin: auto auto 1rem;}
.portfolio-item .caption {  display: none; height: 100%; width: 100%; background-color: rgba(33, 37, 41, 0.2); position: absolute; top: 0; bottom: 0; z-index: 1;}
.portfolio-item .caption .caption-content {  color: #fff; margin: auto 2rem 2rem; }
.portfolio-item .caption .caption-content h2 { font-size: 0.8rem; text-transform: uppercase;}
.portfolio-item .caption .caption-content p { font-weight: 300; font-size: 1.2rem;}
.home-section-img {height:350px; width:100%; object-fit:cover; }
.banner-blue-img {height:300px; width:100%; object-fit:cover; box-shadow:0 3px 3px 0 rgba(0, 0, 0, 0.1); }
.contact-map {box-shadow:1px 1px 1px 1px #ccc; padding:0; }
.room-photos, .room-img {height:300px; width:100%; object-fit:cover; box-shadow:0 3px 3px 0 rgba(0, 0, 0, 0.1); }
.section-img {height:300px; width:100%; object-fit:cover; box-shadow:0 3px 3px 0 rgba(0, 0, 0, 0.1); }

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.intro {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  animation-duration: 2s;
}

@media (min-width: 992px) {
  .portfolio-item { max-width: none; margin: 0; }
  .portfolio-item .caption { -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s; -webkit-clip-path: inset(0px); clip-path: inset(0px); }
  .portfolio-item .caption .caption-content {  transition: opacity 0.25s; margin-left: 5rem; margin-right: 5rem; margin-bottom: 5rem; }
  .portfolio-item img { -webkit-transition: -webkit-clip-path 0.25s ease-out; -webkit-clip-path: inset(-1px); clip-path: inset(-1px);}
  .portfolio-item:hover img {  -webkit-clip-path: inset(2rem); clip-path: inset(2rem); }
  .portfolio-item:hover .caption { background-color: rgba(2, 135, 200, 0.9);  -webkit-clip-path: inset(2rem); clip-path: inset(2rem); display:flex; }
}

/* footer */
footer.footer {padding-top: 5rem; padding-bottom: 5rem;}
footer.footer .social-link { display: block; height: 2rem; width: 2rem; line-height: 2.3rem; text-align:center;
  background-color: #0287c8; transition: background-color 0.15s ease-in-out; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);}
footer.footer .social-link:hover { background-color: #155d74; text-decoration: none;}
footer .footer-address {font-size:115%; font-weight:400;}
.social-networks li {list-style:none;}

a { color: #0287c8;}
a:hover, a:focus, a:active { color: #155d74;}

/* btns */
.btn-primary { background-color: #0287c8 !important; border-color: #0287c8 !important;  color: #fff !important;}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #155d74 !important;  border-color: #155d74 !important;}
.btn-secondary { background-color: #ecb807 !important;border-color: #ecb807 !important; color: #fff !important;}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {background-color: #ba9106 !important; border-color: #ba9106 !important;}
.btn-dark { color: #fff !important;}
.btn { box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1); font-weight: 400; padding:10px 20px;}
.bg-primary { background-color: #0287c8 !important;}
.text-primary {  color: #0287c8 !important;}
.text-secondary { color: #ecb807 !important;}


/* Navigation */
#mainNav {position:absolute; width:100%; z-index:9;}
.navbar-nav li {padding:10px;}
.navbar-nav { box-sizing:border-box !important; }
.navbar-nav li a {color:#fff; opacity:1; font-size:150%; text-shadow:1px 1px 1px rgba(0,0,0,0.3); letter-spacing:0.5px; }
.navbar-nav li a:hover {opacity:1; text-decoration:none; border-bottom:3px solid #0287c8; }
.submenu {display:none;}

/* submenu */
.navbar-nav .link .submenu,
.navbar-nav .current .submenu,
.navbar-nav .section .submenu {display:none; z-index:0; }
.navbar-nav .link:hover .submenu,
.navbar-nav .current:hover .submenu,
.navbar-nav .section:hover .submenu  {	display: block; z-index:999; }
.navbar-nav .submenu { width: 200px; position: absolute; background: #0287c8; padding:10px; font-size: 90%; text-align: left;
    list-style: none; margin-top:10px; text-transform:none; }
.navbar-nav .sub-menu-list { padding:10px 0; }
.navbar-nav .sub-menu-list a {padding:10px 0; border:none; text-transform:none; color:#fffffa; }
.navbar-nav .sub-menu-list a:hover { background:transparent; color:#fff; padding:10px 0; }

@media only screen and (max-width:992px) {
	.fa-navicon {color:#fff !important; padding:2px; }
	.Navnavbar {position:fixed; top:0; left:0; right:0; width:100%; z-index:999;}
	.Navnavbar .container {padding:10px 0; }
	.navbar-nav li {margin:0; text-align:left; }
	.navbar-nav a {padding:10px 0; width:100%; border:none; box-sizing:border-box; }
	.navbar-toggler {padding:0.2em; }
	.navbar-nav .submenu { width: 100%; position: relative; text-align:center;margin-top:0px; }
	.navbar-light .navbar-toggler {border-color:#ccc;}
	.navbar-nav a:hover {background:transparent; color:#ccc;}
}

/* contact form */
.cntact-map { box-shadow:0 1px 10px rgba(0,0,0,0.5);}
.contact {margin-top:50px;}
section#contact .section-heading {  color: #555;}
section#contact .form-group { margin-bottom: 25px;}
section#contact .form-group input,
section#contact .form-group textarea { padding: 10px; width:100%; box-sizing:border-box;}
#Form_Form_Name_Holder,
#Form_Form_Email_Holder,
#Form_Form_Message_Holder {width:100%;  float:left; border-color: rgb(169, 169, 169); text-align:left; }
section#contact .form-group input.form-control { height: auto;}
section#contact .form-group textarea.form-control {height: 248px;}
#Form_Form_action_submit { border-radius:0 !important; color:#fff !important; background: #0287c8; padding:10px 20px; margin:10px 0; float:left; }

/* Login form */
#MemberLoginForm_LoginForm { background-color: #fff; padding: 20px; text-align: left; width: 300px; margin: 20px auto; border:1px solid #ccc; }
#MemberLoginForm_LoginForm input { width: 100%; padding: 5px; box-sizing: border-box; border:1px solid #ccc; }
#MemberLoginForm_LoginForm .checkbox {width:auto; }
#LostPasswordForm_lostPasswordForm_Email{ padding: 5px; border:1px solid #ccc; margin-bottom:5px; box-sizing:border-box; width:40%; }
#LostPasswordForm_lostPasswordForm_action_forgotPassword{ padding:10px; box-sizing:border-box; width:40%;}