:root {
  --ob-blue-color: #81B3E8;
  --ob-grey-color: #8c8f96;
  --ob-dark-grey-color: #333333;
  --ob-light-grey-color: #d8d8d8;
  --ob-red-color: #c11c4f;
  --ob-dark-red-color: #ab0c3d;
}
body {
  color: var(--ob-dark-grey-color);
  font-family: Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.025rem;
}
a {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: var(--ob-dark-grey-color);
}
a:hover,
a:focus {
  text-decoration: none;
  color: var(--ob-red-color);
}
header {
  background: #fff;
  color: var(--ob-dark-grey-color);
}
.navbar-brand img {
  width: 110px; /* was 130px*/
  height: auto;
  margin: .8rem 0;
}
.header-top-container {
  position: relative;
  top: 10px;
}
.header-top-container ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.header-top-container ul li {
  list-style-type: none;
  display: inline-block;
  border-right: 1px solid var(--ob-light-grey-color);
  line-height: 1rem;
  margin-right: .5rem;
  font-size: .9rem; /* was 1rem */
  font-weight: 700;
  text-transform: uppercase;
  margin-right: .5rem;
  color: var(--ob-red-color);
}
.header-top-container ul li:last-child {
  border-right: 0;
}
.header-top-container ul li a {
  font-size: .9rem; /* was 1rem */
  font-weight: 700;
  text-transform: uppercase;
  margin-right: .5rem;
}
.header-top-container ul li:last-child a {
  margin-right: 0;  
}
.text-align-right {
  text-align: right;
}
.text-align-right a {
  color: var(--ob-red-color) !important;
}
.navbar-nav .nav-link {
  font-weight: 700;
  text-transform: uppercase;
  font-size: .9rem; /* was .75rem */
  width: auto;
  margin: .2rem .5rem .8rem .25rem; /* bottom was 1.2rem */
}
.navbar-nav .nav-link span {
  border-bottom: 2px solid transparent;
  padding-bottom: .75rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.navbar-nav .nav-link span:hover,
.navbar-nav .nav-link span:focus {
  color: var(--ob-dark-grey-color);
  border-bottom: 2px solid var(--ob-dark-grey-color);
}

.navbar-light .navbar-nav .nav-link {
  color: var(--ob-dark-grey-color);
}
.navbar-light .navbar-nav a.highlight,
.navbar-light .navbar-nav a.highlight:focus,
.navbar-light .navbar-nav a.highlight:hover {
  color: var(--ob-red-color);
}
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--ob-dark-grey-color);
}
.embed-responsive-16by9::before {
  /*padding-top: 32%;*/
  padding-top:40%;
  margin-top: 0;
  margin-bottom: -15px;
}
.widget {
  background: #fff;
  -webkit-box-shadow: 0 2px 15px 0 rgba(192,192,192,0.5);
  -moz-box-shadow: 0 2px 15px 0 rgba(192,192,192,0.5);
  box-shadow: 0 2px 15px 0 rgba(192,192,192,0.5);
  font-size: .75rem;
  padding: 0;
  width: 970px;
}
.widget-float {
  position: relative;
  top: -1rem;
  border: 1px solid #fff;
}
.fixed-top {
  width: auto;
}
.widget .container {
  margin: 0 auto;
  max-width: 970px;
}
.widget .container label {
  display: block;
  max-width: 100%;
  font-weight: 700;
  margin-bottom: 0;
  text-transform: uppercase;
  margin-left: .25rem;
}
.widget .container .form-padding {
  padding: 1rem 0;
}
.widget .container .form-padding .form-divide {
  border-right: 1px solid var(--ob-light-grey-color);
  padding: 0 1rem;
}
.widget .container .form-padding:nth-of-type(4) .form-divide {
  border: 0;
}
.widget .container .form-button {
  padding: 0;
  display: flex;
}
.widget .container .form-button .btn-primary {
  font-size: .75rem;
  line-height: 1.1rem;
  padding: 1rem 2rem;
  font-weight: 500;
}
.widget .form-control {
  border-radius: 0;
  border: 0;
  font-weight: 400;
  padding: 0 .25rem;
  height: auto;
}
.widget .form-control:disabled, .widget .form-control[readonly] {
  background-color: #fff;
}
.scroll-to-top-container {
  display: inline;
  position: fixed;
  bottom: 30px;
  right: 30px;
}
.scroll-to-top {
  position: relative;
  display: inline-block;
  background: var(--ob-red-color);
  color: #fff;
  border-radius: 2rem;
  padding: .35rem .65rem;
  font-size: .7rem;
}
.scroll-to-top:hover,
.scroll-to-top:focus {
  color: #fff;
}
.scroll-to-top-float {
  position: relative;
  bottom: 0;
  right: 0;
  display: block;
}
.scroll-to-top-float .scroll-to-top {
  position: absolute;
  bottom: -30px;
  right: 15px;
}
footer {
  text-align: left;
  padding: 1.75rem;
  background: #000;
  color: #fff;
  font-size: .7rem;
}
footer .container {
  max-width: 1080px;
}
footer ul {}
footer ul li {
  margin: .5rem 0;
}
footer a {
  color: #fff;
}
footer a:hover,
footer a:focus {
  text-decoration: none;
  color: #8C8F96;
}
footer a i {
  background: #fff;
  color: #000;
  border-radius: 2rem;
  padding: .25rem;
  text-align: center;
  width: 30px;
  margin-right: .5rem;
  margin-top: .5rem;
}
footer a:hover i,
footer a:focus i {
  background: #8C8F96;
}
footer .copyright {
  text-align: center;
  margin: 2rem 0 0 0;
  /* margin: 2.5rem 0 1.5rem 0; */
}
h1 {
  text-align: center;
  margin: 1rem auto;
  font-weight: 700;
  color: var(--ob-dark-grey-color);
  font-size: 1.1rem; /* was 1.25rem */
  font-family: Arial, serif;
  text-transform:uppercase;
}
h2 {
  color: var(--ob-dark-grey-color);
  text-align: center;
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
h3 {
  font-size: 1.1rem; /* 1.25 rem */
  font-family: Arial, serif;
  text-align: center;
  font-weight: 700;
  color: var(--ob-dark-grey-color);
}

hr {
  margin: 2.5rem 0;
  border-top: 1px solid var(--ob-light-grey-color);
}
a.anchor {
  display: block;
  position: relative;
  top: -225px;
  visibility: hidden;
}
.btn {
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 400;
}
.btn:focus, .btn:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.btn:hover, .btn:active, .btn:focus {
  background: var(--ob-dark-red-color) !important;
}
.btn:focus,
.btn-original:hover {
    color: #fff !important;
}
.btn-primary {
  background-color: var(--ob-red-color);
  border: 0;
}
.btn-outline-primary {
  border-color: var(--ob-red-color);
  color: var(--ob-red-color) !important;
}
.btn-outline-primary:active,
.btn-outline-primary:hover {
  background-color: var(--ob-red-color);
  color: #fff !important;
  border-color: transparent;
}
.btn-sm {
  font-size: .75rem;
}
.btn-original {
  background: #ffffff !important;
  border-top: 1px solid var(--ob-light-grey-color);
  border-bottom: 1px solid var(--ob-light-grey-color);
  margin: 0 2rem;
  padding: 1rem 3rem;
}
.btn-original:hover,
.btn-original:active,
.btn-original:focus, {
  background: #ffffff !important;
}
.main-text {
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.main-text .btn-primary {
  margin: .5rem 0 1.5rem 0;
}
.border-box {
  border: 1px solid var(--ob-light-grey-color);
  max-width: 1080px;
  margin: 2rem auto;
  padding: 1.75rem;
}
.border-box ul {
  -moz-column-count: 3;
  -moz-column-gap: 30px;
  -webkit-column-count: 3;
  -webkit-column-gap: 30px;
  column-count: 3;
  column-gap: 30px;
  text-align: left;
  margin-top: 1rem;
  margin-left: 0;
  padding-left: 1rem;
}
.border-box a {
  text-transform: uppercase;
  font-size: .9rem; /*font-size: .75rem;*/
  font-weight: 900;
  /* color: var(--ob-red-color); */
  color: #000;
}

.obanCarousel {
  background: linear-gradient(to bottom, #fff, #fff 60px, #f7f7f7 60px, #f7f7f7 100%);
  padding-bottom: 30px; /* was 60px */
  border-bottom:1px solid #eee;
}
.obanCarousel .carousel-item {
  margin-right: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.obanCarousel .card-img-top {
  border-radius: 0;
  height: 203px;
}
.obanCarousel .card-footer {
  width: 75%;
}
.obanCarousel .card-footer p:last-child {
  border-top: 1px solid var(--ob-light-grey-color);
  padding-top: 1rem;
}
.obanRooms .card-footer  {
  padding-bottom: 1rem;
}

#carousel-main {
  height: auto;
  overflow: hidden;
  position: relative;
}

.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100% 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left {
-webkit-transform: translate3d(0,-100%, 0);
        transform: translate3d(0,-100%, 0);
}

.card {
  border: 0;
  border-radius: 0;
  text-align: center;
}
.card-img-top {
  border-radius: 0;
}
h3.card-title {
  font-size: 1.25rem;
}
.card-text,
.card-footer {}
.card-footer {
  background: #fff;
  border: 0;
  margin: 0 auto;
}
.card-footer a {
  text-transform: uppercase;
  font-size: .9rem; /*.75rem*/
  font-weight: 900;
}
a.text-red,
.card-footer a.highlight {
  color: var(--ob-red-color);
}

.mobile {
  display: none;
}

label[for="arrival"], 
label[for="departure"],
label[for="numadults"],
label[for="numchildren"] {
    font-size:.9rem;
}

.navbar-toggler {
    margin-right:15px;
    border: 1px solid rgba(193, 28, 79, 0.25) !important;
}
.navbar-toggler:focus {
    outline:none;
}
/* Override the nav image SVG color */
.navbar-toggler-icon {
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(193, 28, 79, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}

/* widget-room-switcher.php */
.room-types-listing-widget ul,
.room-types-listing-widget ul li {
    display: inline-block;
}
.room-types-listing-widget ul li {
    list-style-type:none;
}
.room-types-listing-widget ul li a {
    color: var(--ob-red-color);
    font-size: .9rem;
}
.room-types-listing-widget ul li a.current {
    text-decoration: underline;
}
.room-types-listing-widget ul li:after {
    content: '|';
    padding: 0 5px 0 5px;
}
.room-types-listing-widget ul li:last-of-type:after {
    content:none;
}

/** All Oban Inn Rooms Include border-box, fixing the odd bottom spacing */
.border-box {
    margin-top:0;
}
.border-box ul:last-of-type {
    margin-bottom:0;
}

/* Dining Page Adjustments */
.reservationNumbers {
    font-weight: bold;
    font-size: .9rem !important;
}
.reservationNumbers a {
    font-size: .95rem !important;
    color:var(--ob-red-color) !important;
}
.reservationNumbers a.emailLink {
    font-size:1rem !important;
}

.border-box.border-box--left-lined ul {
    columns: 1 !important;
}

/** Activities page **/
.activities-box p {
    font-size: .9rem;
    padding-top:10px !important;
    text-align:center;
}
.activities-box .row div {
    margin-bottom:10px;
}
.activities-box .row img {
    border-radius:5px;
}

/** Utility **/
.vh-53 {
    min-height: 53.8vh;
}
.red {
    color:var(--ob-red-color) !important;
}

/** Footer address **/
.footerAddress {
    font-size:17px;
    padding: 20px 0;
    background-color: #f7f7f7;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.footerAddress p {
    padding:0;
    margin:0;
}
.footerAddress a {
    color: #c11c4f;
    font-weight:bold;
}

/** Contact form **/
#contactForm label {
    font-weight:600;
    margin-bottom:0;
}
.mapouter {
    position:relative;
    text-align:left;
    height:auto;
    width:100%;
}
.gmap_canvas {
    overflow:hidden;
    background:none !important;
    height:300px;
    width:100%;
}                       

/** Special Packages **/
.specialPackages .thumbnail {
    position: relative;
    text-align:center;
    
    /* temporary */
    padding:0;
}

/* temporary */
.specialPackages .thumbnail img {
    width:100% !important;
    height:100%;
}
.specialPackages .caption {
    background-color: rgba(0,0,0,0.5);
    color:rgba(255,255,255,0.95);
    padding-top:5px;
    font-weight:bold;
    position: absolute;
    bottom: 0%;
    left: 0;
    width:100%;
    /*border-right:1px solid #fff;*/
}
.specialPackages .caption p {
    margin-bottom:.5rem;
}
.specialPackages .caption:nth-child(3) {
    border-right:0;
}

/** Room type */
.room-type-listing a {
    color: #000 !important;
    font-weight:bold;
    font-size:15.5px !important;
}


/** Wedding Packages **/
.wedding-packages-listing-container ul li {
    font-size: 11pt;
}
.wedding-packages-listing-container ul li {
    margin-bottom:5px;
}
.wedding-packages-listing-container ul li:last-of-type {
    margin-bottom: 0;
}
.wedding-packages-listing-container small {
    font-style: italic;
}
.card-img-bottom {
  color: #fff;
  height: 20rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Player Styles */
.item-video .video-audio-icon {
    position: absolute;
    bottom: 15px;
    right: 15px;
    cursor: pointer;
    color: #fff;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease
}
.item-video .video-audio-icon:after {
    font-size: 30px;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f028"
}
.item-video .video-audio-icon.video-mute:after {
    content: "\f026"
}
.item-video .playpause {
    display: inline-block;
    background-image: url(../images/play-button.png);
    background-repeat: no-repeat;
    width: 30%;
    height: 30%;
    position: absolute;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    margin: auto;
    background-size: contain;
    background-position: center
}



/* Extra small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .border-box ul.menu {
    -moz-column-count: 2;
    -moz-column-gap: 40px;
    -webkit-column-count: 2;
    -webkit-column-gap: 40px;
    column-count: 2;
    column-gap: 40px;  
  }
  .multi-item-carousel .carousel-inner .carousel-item {
    margin-right: inherit;
  }
  .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item,
  .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item {
    display: block;
  }
  .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
  .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
    transition: none;
  }
  .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item + .carousel-item {
    position: absolute;
    top: 0;
    right: -33.33333333%;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  .multi-item-carousel .carousel-inner .carousel-item-next,
  .multi-item-carousel .carousel-inner .carousel-item-prev {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  .multi-item-carousel .carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  .multi-item-carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
  .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item,
  .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
  .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  .multi-item-carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
  .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item,
  .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
  .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
    display: block;
    visibility: visible;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .border-box ul.menu {
    -moz-column-count: 5;
    -moz-column-gap: 10px;
    -webkit-column-count: 5;
    -webkit-column-gap: 10px;
    column-count: 5;
    column-gap: 10px;  
  }
  .border-box ul.menu li {
    //display: inline-block;
    //border: 1px solid red;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

@media (max-width: 992px) {
    .widget {
        max-width: auto;
    }
    .mobile {
        display: block;
    }
    .desktop {
        display: none !important;
    }
    .widget, .widget .container {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    footer {
        text-align: center;
    }
    
    .main-text h1:first-of-type {
        margin-top:10px;
    }
    
    .obanCarousel {
        padding-bottom:0;
    }
    .obanCarousel .carousel-item {
        margin-bottom:25px;
    }

    div.booking-widget .container .row .form-padding:first-child,
    div.booking-widget .container .row .form-padding:nth-child(2) {
        padding-bottom: 0 !important;
    }
    
    .nav-fill .nav-item {
        padding-left: 20px;
    }

    .border-box ul {
        column-count:2;
    }

    .main-text form#contactForm {
        text-align: left !important;
    }
    
    .btn-original {
        margin: 0 0.8rem;
        padding: 1rem 1rem;
    }
    
    .room-types-listing-widget ul,
    .room-types-listing-widget ul li {
        display:block !important;
    }
    .room-types-listing-widget ul li {
        padding-top: 7px;
        padding-bottom: 7px;
        border-bottom:1px solid #eee;
    }
    
    .room-types-listing-widget ul li:last-child {
        border-bottom:0;
    }
    .room-types-listing-widget ul li:after {
        content:none !important;
        padding:0 !important;
    }
    .room-types-listing-widget ul li:before {
        content: "\00BB \0020";
    }
    .room-types-listing-widget ul {
        padding-left:0;
        list-style-type: solid;
        text-align:left;
    }
    
    .wedding-packages-listing-container h4.card-title {
        margin-top:15px;
    }
    .wedding-packages-listing-container h4.card-title,
    .wedding-packages-listing-container small {
        text-align:center;
    }
    
    /* Match the video height on mobile to 308px */
    .carousel-item img {
        object-fit: cover;
        height: 246.4px; /* was 308px */
    }
    .carousel-inner {
        height: 246.4px; /* was 308px */
    }
    .booking-widget .form-button button {
        font-size:11pt !important;
    }
}

@media (min-width: 1023px) {
    .item-video .playpause {
        display: none
    }
    .item-video {
        padding-bottom: 32%;
        min-height: auto;
        height: auto;
    }
}
@media (max-width: 768px) {
  .obanCarousel .card {
    margin-bottom: 2rem;
  }      
}