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

body {
  font-family: 'Roboto', sans-serif;
  letter-spacing:0.8px;
}

hr {
  max-width: 50px;
  border-width: 3px;
  border-color: #00006a;
  margin-left:0;
}

hr.light {
  border-color: #fff;
}

a {
  color: #00006a;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

a:focus {outline:none; } 

a:hover {
  color: #00006a;
  text-decoration:none;
}

h1,
h2 {
  font-weight:700;
  font-family: 'Rufina', serif;
}
h3,
h4,
h5,
h6 {
  font-weight:400;
}

.bg-primary {
  background-color: #00006a !important;
}

.bg-dark {
  background-color: #212529 !important;
}

.text-faded {
  color: rgba(255, 255, 255, 0.7);
}

section {
  padding: 6rem 0;
}

.section-heading {
  margin-top: 0;
}

::-moz-selection {
  color: #fff;
  background: #212529;
  text-shadow: none;
}

::selection {
  color: #fff;
  background: #212529;
  text-shadow: none;
}

img::selection {
  color: #fff;
  background: transparent;
}

img::-moz-selection {
  color: #fff;
  background: transparent;
}

h1 {font-size:2.2rem;}
h1.main-title{font-size:2.5rem;}

@media (max-width:992px) {
	section { padding: 4rem 0;}
	h1, .h1, h1.main-title {font-size:1.8rem;}
}

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

.sidebar-nav {
    padding: 0;
    display: block;
    list-style:none;
    text-align:left;
    font-size:26px;
    z-index:99;
}

.fa-angle-down {
 	vertical-align: middle;
  line-height: inherit;
 }
.sidebar-nav .link {
	padding:0.25rem 0;
}

.full-nav {
	margin-top:200px;
}

.mobile-nav {
	margin-top:100px;
}

.page-photo {
	position: absolute;
  left: 750px;
  top: 0;
  display:none;
  width:400px;
}

.submenu {
    position: absolute;
    font-size: 18px;
    top:0;
    left: 380px;
    padding:0;
    width:310px;
}

.submenu li {
	padding:10px 0;
	list-style:none;
	border-bottom: 1px solid #555;
}

/* animation 
.menu-list::before {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    position: relative;
    top: 60px;
    -webkit-transition:width .25s cubic-bezier(0.51, 0.18, 0, 0.88) .1s;
    -o-transition:width .25s cubic-bezier(0.51, 0.18, 0, 0.88) .1s;
    transition:width .25s cubic-bezier(0.51, 0.18, 0, 0.88) .1s;
 }

.menu-list:hover::before {
    width: 28%;
    //transition: width .5s;
    transition-delay: .25s;
    background: #00006a;
   
}
.menu-list::after {
    width: 0;
    content: '';
    display: block;
     height: 3px;
     margin-top: -3px;
    -webkit-transition:width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
   -o-transition:width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
   transition:width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);

}
   
.menu-list:hover::after {
    width: 28%;
    //transition: width .3s;
    background: #777;

}
*/

/** Submenu and page photo **/
.sidebar-nav .link .submenu,
.sidebar-nav .current .submenu,
.sidebar-nav .section .submenu {
	display:none; z-index:0;
	 }
.sidebar-nav .link:hover .submenu,
.sidebar-nav .current:hover .submenu,
.sidebar-nav .section:hover .submenu  {	
	display: block; z-index:999; background:#fff;
 }

.sidebar-nav .link .page-photo,
.sidebar-nav .current .page-photo,
.sidebar-nav .section .page-photo {
	display:none; z-index:0;
	 }
.sidebar-nav .link:hover .page-photo,
.sidebar-nav .current:hover .page-photo,
.sidebar-nav .section:hover .page-photo  {	
	display: block; z-index:999; background:#dee2e6;
 }
 
.sidebar-nav .tab-first  .page-photo, .sidebar-nav .tab-first .submenu {
	display:block !important;
	z-index:999;
	color:#777;
}

.sidebar-nav li.sidebar-nav-item a {
  display: block;
  text-decoration: none;
  color: #555;
  padding: 15px;
}

.sidebar-nav li a:hover,
.sidebar-nav li:hover {
  text-decoration: none;
  color: #00006a;

}

.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: 15px;
  padding-left: 15px;
}

.sidebar-nav a {
  color: #333;
}

.sidebar-nav a:hover {
  color: #222;
  background: none;
}

#sidebar-wrapper.active {
  right: 250px;
  width: 100%;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

.menu-toggle {
  position: fixed;
  right: 15px;
  top: 25px;
  width: auto;
  padding:0 1rem;
  height: 50px;
  text-align: center;
  color: #fff;
  /*background: rgba(52, 58, 64, 0.5);*/
  line-height: 50px;
  z-index: 999;
  font-size:150%;
}

.menu-toggle:focus, .menu-toggle:hover {
  color: #fff;
  text-decoration:none;
}

.menu-toggle:hover {
  /*background: #343a40;*/
}

@media (max-width:992px ){
	
	.menu-toggle {
		top:15px;
	}
	 .sidebar-nav li {
	 padding:5px 0;
  }
  .submenu {
  	position:relative !important;
  	left:0;
  	width:100%;
  	font-size:18px;
  }
  .sidebar-nav .link {
	 padding:0.5rem 0;
  }
}

/* Secondary navigation */
	.secondary h4 {
	    font-size: 20px;
	    color: #AAA;
	    margin: 0 0 8px 0;	    
	    font-weight: normal;
	}
		.secondary ul {
		    padding: 0;
		    margin: 0;
		}
		.secondary li {
		    border-top: 1px solid #e5e5e5;
		    position: relative;
		    list-style-type: none;
		    margin-bottom: 0;
		}
			.secondary li .arrow { 
			    color: #00006a;
			    padding-right: 5px;
			    display: block;
			    font-size: 15px;
			    line-height: 20px;
			    position: absolute;
			    left: 2px;
			    top: 7px;
			    -moz-transition: 0.2s; /* this transition moves the arrow from left:2px to left:6px */
			    -webkit-transition: 0.2s;
			    transition: 0.2s;
			}
		.secondary li a:hover .arrow {
		    left: 6px; /* this sets the final position for the arrow transition */
		}
		.secondary li a { /* side nav link styling */
		    padding: 10px 0;
		    display: block;
		    text-transform: uppercase;
		    letter-spacing: 1px;
		    font-size: 14px;
		    color: #333;
		    line-height: 17px;
		    border-bottom: none;
		}
		.secondary li .text {
		    padding-left: 28px;
		    display: block;
		}
		.secondary li.current a.current {
			color: #00006a;
			background-color: #EDEDED;
		}
		.secondary li.section,
		.secondary li.current {
		    background-color: #F3F3F3;
		}
			.secondary li.section a,
			.secondary li.current a {
			    color: #000;
			}
		

		/* Secondary navigation 2-5 levels deep */
		.secondary ul ul {
			display: none;
		}
		.secondary ul li.current ul,
		.secondary ul li.section ul { /* Only show child pages from selected parent */
			display: block;
		}
		.secondary li.current ul ul {
			display: none;
		}
		.secondary ul ul li a { padding-left: 10px; } /* Indent all sidebar navigation levels*/
		.secondary ul ul li a .arrow { left: 12px; }
		.secondary ul ul li a:hover .arrow { left: 16px; }

		.secondary ul ul ul li a { padding-left: 20px; }
		.secondary ul ul ul li a .arrow { left: 22px; }
		.secondary ul ul ul li a:hover .arrow { left: 26px; }

		.secondary ul ul ul ul li a { padding-left: 30px; }
		.secondary ul ul ul ul li a .arrow { left: 32px; }
		.secondary ul ul ul ul li a:hover .arrow { left: 36px; }
			
		.secondary ul ul ul ul ul li a { padding-left: 40px; }
		.secondary ul ul ul ul ul li a .arrow { left: 32px; }
		.secondary ul ul ul ul ul li a:hover .arrow { left: 36px; }

		.secondary li a:hover,
		.secondary li.section a:hover,
		.secondary li.current a:hover {
			color: #00006a;
		}

a.active {
	/*color:#333 !important; */
	background: #00006a;
}

img.logo {
	position:fixed;
	z-index: 999;
}

.property-logo {
	position:absolute;
	top:1rem;
}

.logo-div {
	width:100%;
	height:100px;
	z-index:1;
}
#mainNav {
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

#mainNav.navbar-shrink {
    border-bottom: 5px solid #fff;
    background-color: #00006a;
    z-index:999;
}

.navbar-shrink img.logo {
	height:60px;
}
  
.text-shadow {
	text-shadow: 0 1px 10px rgba(0,0,0,0.1);
}

.shadow {
	box-shadow:0 1px 10px rgba(0,0,0,0.1);
}


.masthead .container {
	left:0;
	right:0;
	margin:auto;
	top:400px;
}

.templateHead .container {
	margin:auto;
}

.masthead h2 {
	font-size:30px !important;
	font-weight:600 !important;
}

/* Slideshow */
.main-slideshow {width:100%; }
.carousel-inner, .carousel-item { width:100%;}
.carousel-item img {height:100vh; width:100vw;  object-fit:cover; background-position:top center; }
.carousel-caption {display:none !important;}

header.masthead {
  /*padding-top: 10rem;*/
  padding-bottom: calc(10rem - 56px);
  background-image: url("../img/header.jpg");
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.templateHead {
  height:500px;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position:relative;
}

@media (max-width:992px){
	/* Slideshow */
	.main-slideshow, .masthead {width:100%; height:500px; }
	.carousel-inner, .carousel-item { width:100%; height:500px;}
	.carousel-item img {height:500px; width:100vw;  object-fit:cover; background-position:top center; }
	.carousel-caption {display:none !important;}
	.masthead h2 , .templateHead h2{font-size:18px !important;}
	.masthead .container {top:80px;}
	.lead {font-size:1rem !important;}
	img.logo { height:60px;}
	.templateHead {height:400px;}
	.logo-div {height:80px;}
}

header.masthead hr {
  margin-top: 30px;
  margin-bottom: 30px;
}

header.masthead h1 {
  font-size: 2rem;
}

header.masthead p {
  font-weight: 300;
}

@media (min-width: 992px) {
  header.masthead {
    height: 100vh;
    min-height: 650px;
    padding-top: 0;
    padding-bottom: 0;
  }
  header.masthead h1 {
    font-size: 3rem;
  }
  .sidebar-nav {
    font-size:40px;
}
}

@media (min-width: 1200px) {
  header.masthead h1 {
    font-size: 4rem;
  }
}

.accordion .card-header {
	padding: 1.5rem;
  cursor: pointer;
}

.accordion .card-header a {
	padding: 1.5rem 0;
  cursor: pointer;
  width:100%;
}

.accordion h5:before {
	  font-family: "Font Awesome 5 Free";
    content: "\f0dd";
    font-weight: 600;
    vertical-align: bottom;
    font-size:1.8rem;
}

.accordion .card-body {
  padding: 2rem 1.5rem;
  font-size: 1.2rem;
}

.tab-img {
	height:400px;
	width:100%;
	object-fit:cover;
}

.service-box {
  max-width: 400px;
}

.portfolio-box {
  position: relative;
  display: block;
  max-width: 650px;
  margin: 0 auto;
}

.portfolio-box .portfolio-box-caption {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 1;/* opacity:0 for hover effect*/
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  padding: 0 15px;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  font-size: 18px;
}

.portfolio-box:hover .portfolio-box-caption {
  display:none;
  /* opacity: 1;
  background: rgba(8, 70, 113, 0.8) transparent; */
}

.portfolio-box:focus {
  outline: none;
}


ul.social-buttons {
  margin-bottom: 0;
}

ul.social-buttons li a {
  font-size: 20px;
  line-height: 50px;
  display: block;
  width: 50px;
  height: 50px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: white;
  border-radius: 100%;
  outline: none;
  background-color: #000;
}

ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
  background-color: #00006a;
}

@media (min-width: 768px) {
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
    font-size: 16px;
  }
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    font-size: 22px;
  }
}

.text-primary {
  color: #00006a !important;
}

.text-yellow {
  color: #ffc72c !important;
}
.text-yellow2 {
  color: #7c6420 !important;
}

.bg-yellow {
  background-color: #ffc72c !important;
}

.reviews-bg, .large-section-image {
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

@media (max-width:992px){
	.large-section-image {
        background-attachment:inherit !important;
        background-size: contain !important;
        height: 250px !important;
   }
}

.reviews-bg h3 img {height:30px;}

.custom-object-fit {
  position: relative;
  background-size: cover;
  background-position: center center;
}

.custom-object-fit .carousel-item img, .custom-object-fit .img-box img {
    opacity: 0;
  }

/* IE designs */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .reviews-bg, .large-section-image {
        background-attachment:inherit !important;
   }
}

.large-section-image {
	height:500px;
}

.bg-blue {
	background:#084671;
	background-image: url(../img/leaf-bg.png);
	background-size: cover;
}

.bg-faded {
	background: rgba(0,0,0,0.8);
}

.btn {
  /* font-weight: 700;
  text-transform: uppercase; */
  border: none;
  white-space:normal;
  border-radius:0 !important;
}

.btn-xl {
  padding: 1rem 2rem;
}

.btn-primary {
  background-color: #00006a;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  color: #fff;
  background-color: #00006a !important;
}

.btn-primary:active, .btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(240, 95, 64, 0.5) !important;
}

.arrow-btn {
	padding:1rem;
	cursor:pointer;
}

.arrow-btn img {
	height:20px;
	-webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.arrow-btn:hover img {
	padding-left:10px;
}

.tab-title {
	 
}

/********** Image **********/
.logo {height:80px;}
.small-logo {height:40px;}
.section-img {height:250px; width:100%; object-fit:cover;}
.facilities-img {width:100%; object-fit:cover;}
.badges {height:150px; object-fit:cover;}
.img-thumbnail {height:200px; width:100%; object-fit:cover; border-radius: 0 !important; border:none; }
.room-images img {height:326px; width:100% !important; object-fit:contain; padding: .25rem; background-color: #fff;  
	border-radius:0; max-width: 100%; z-index:9; }
.room-images a {width:100% !important;}
.rooms-info {border-bottom:2px solid;}
.page-gallery-img {object-fit:cover;}
.badges img {height:120px; width:auto; }
.badges {height:auto; text-align:center;}

/*********** page gallery **********/
.page-gallery {}
.page-gallery-img { width:100%; height:200px; }

/********** carousel **********/
.slideshowPrev, 
.slideshowNext { background:none; color:#fff; font-family:inherit; font-size:40px; font-weight:300; line-height:100%; 
	padding:10px; position:absolute; top:35%; z-index:8; opacity:0.7; transition:opacity .5s ease-in-out; border:none; }
.slideshowPrev { left:10px; }
.slideshowNext { right:10px; }
.slideshowPrev:hover, 
.slideshowNext:hover { cursor:pointer; opacity:1; }

/* image hover */
.img-box {
  overflow: hidden;
  transition: .5s;
}

.img-box .tab-img {
  width: 150%;
  height: 400px;
  object-fit: cover; 
  transition: .5s;
}

.img-box:hover { flex: 1 1 50%; }
.img-box:hover .tab-img {
  width: 100%;
  height: 400px;
}

/* hidden extra Webrooms room type */
#room148684 {display:none;} 
.modal-dialog {width: 100%; min-width: 100%; max-width: 100%; min-height: auto;}
.modal-img img {height:150px; width:180px; border:1px solid #ddd; float:left; padding:0.2rem; }

/* room avail table */
.roomtype .availability { text-align:center; margin-top:1em; }
.roomtype .availabilityTable { margin:0 auto 10px auto; width:100%; font-size:10px; border-collapse:collapse; box-sizing:border-box; text-align: center; }
.roomtype .availabilityTable th { font-weight:normal !important; background:#eee; padding:3px 0; opacity:0.5; }
.roomtype .availabilityTable td { border:1px solid #fff; padding:10px 0; text-align: center; }
.roomtype .availabilityTable td:first-child { border-left:none; }
.roomtype .availabilityTable td:last-child { border-right:none; }
.roomtype .availabilityTable .avail a { padding:10px 0; display:block; text-decoration:none; color:#333; }
.roomtype .availabilityTable .avail { color:#333;	background:#d4f7a5; }
.roomtype .availabilityTable .avail:hover { background:#b2ea78; }
.roomtype .availabilityTable .notavail { padding:10px 0; color:#bbb; background:#f1f1f1;}

@media (max-width:960px){
	.room-images img {height:250px;}
	.modal-img {min-height:250px;}
	.modal-img img {height:100px; width:140px; border:1px solid #ddd; float:left; padding:0.2rem; }
}

/* pop-up window */
.modal { display: none; position: fixed; z-index: 9999;  left: 0; top: 50px; width: 100%; height: 100%; 
    overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.6);}
.modal-content { background-color: #fff; margin: auto; padding: 20px; border: 1px solid #888; border-radius:5px; width: 960px; height:auto;}
.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold;}
.close:hover, .close:focus {color: #000; text-decoration: none; cursor: pointer;}
.modal-content a:hover {opacity:1;}
.modal-dialog {margin:0 auto;}

#popup  {  position: fixed; z-index: 9999;  padding-top: 150px; left: 0; top: 0; width: 100%; height: 100%; 
    overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.6);}

#popup img {
	width:100%;
}
@media (max-width: 940px){
	.modal { padding-top: 20px; }
.modal-content { width: 94%; padding:5px;}
.modal-header {padding:0.5rem;}
#popup  {padding-top:100px;}
}


/* template page slideshow */
.page-slideshow {height:auto; width:100%;}
.page-slideshow .carousel-item img {height:400px; width:100%;  object-fit:cover; background-position:center center; }
.page-slideshow .carousel {margin-bottom:3rem; box-shadow:0 1px 10px rgba(0,0,0,0.1); }

.overlay {
	background-color:rgba(0,0,0,.8);height:100%;width:100%;z-index:10
}

.template-picker {
	position: absolute;
    width: 100%;
    bottom:0;
}
 @media (max-width:992px){
 	.template-picker {
 	top:127px;
	}
	.template-picker h2{
		 font-size:18px;
	}
}

/* gallery */
#portfolio #portfolio-flters li {
  cursor: pointer;
  margin: 15px 15px 15px 0;
  display: inline-block;
  padding: 6px 20px;
  font-size: 12px;
  line-height: 20px;
  color: #00006a;
  border-radius: 50px;
  text-transform: uppercase;
  background: #ecf5ff;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

#portfolio #portfolio-flters li:hover,
#portfolio #portfolio-flters li.filter-active {
  background: #00006a;
  color: #fff;
}

#portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

#portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}