/******************* getting rid of the padding on cols. pbootstrap has a class for this so prob not needed *******************/


.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-left: 0;
    padding-right: 0;
}



/******************* setting up the spacing system used throughout *******************/


/* each section is wrapped in a container-wrapper */

.container-wrapper {
        padding: 1rem;
}

@media only screen and (min-width: 600px) {
        .container-wrapper {
                padding: 3rem;
        }
}

@media only screen and (min-width: 996px) {
        .container-wrapper {
                padding: 3rem;
        }
}

@media only screen and (min-width: 1200px) {
        .container-wrapper {
                padding: 4rem;
        }
}

/* each module in a column is wrapped in an element-wrapper */

.element-wrapper {
                padding: 1rem;
                    }

@media only screen and (min-width: 996px) {
        .element-wrapper {
                padding: 2rem;
        }
}

@media only screen and (min-width: 1200px) {
        .element-wrapper {
                padding: 3rem;
        }
}


/******************* nav *******************/


.mynav {
  position: relative;
  z-index: 2000;
  width: 100%;
  padding-top: 0;
  /*background-color: white;*/
  background-color: #bde8f7;
}

@media only screen and (min-width: 768px) {
.mynav {
      background-color: transparent;
    }
}


.logo, .logo img {
    width: 300px;
}

@media only screen and (min-width: 996px) {
    .logo, .logo img {
        width: 300px;

    }
}

@media only screen and (max-width: 480px) {
  .logo, .logo img {
      width: 220px;
  }
}

.navlinks li {
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
  margin: 1rem 0rem 1rem 1.5rem;
  padding: 0;
}

/******************* top stuff *******************/



.intro {
    position: relative;
    z-index: 100;
    width: 100%;
    z-index: 10;
    top: 40%;
}

@media only screen and (min-width: 996px) {
    .intro {
        position: absolute;
        z-index: 100;
        top: 18%;
    }
}

.header {
    position: relative;
    z-index: 100;
    /*background-color: #fff;*/
}




/*******************  *******************/


.card { 
        border: none;
        border-right: solid 2px #003d58;
        border-bottom: solid 2px #003d58;
        border-radius: 5px;
        background-color:rgba(255,255,255,0.1);
    /*    background: linear-gradient(0deg, rgba(89,89,71,0.1) 0%, rgba(89,89,71,0.05) 100%);*/
}


/*.logos {
    border-top: solid 1px rgba(89,89, 71, 0.3);
}*/
.footer {
    background-color:rgba(89,89, 71, 0.1);
}




/******************* colours *******************/

.bg-mid-grey {
    background-color:#ccc;
}
.bg-blue {
    background-color:#59c9eb;
}
.bg-dark-grey {
    background-color:#999;
}
.bg-white {
    background-color: white;
}
.bg-navy {
    background-color:#003d58;
}
.bg-sky {
    background-color:#bde8f7;
}
.white {
    color:#fff;
}



/******************* helpers *******************/

.sticky-top {
    padding-top: 6rem;
}

ul {
    margin: 0 0 0 1rem;
    padding: 0;
}

.logosrow {
    margin-left: 50%;
}

.hotel-logo.element-wrapper {
    padding: 1rem;
    max-width: 300px;
    margin: auto;
}

.hotel-logo img {
    display: block;
}

.hotel-logo p {
    font-size: 10px;
    text-align: center;
    position: relative;
    top: -0.5rem;
    border-top: solid 1px #ebebeb;
    padding-top: 0.5rem;
}



/******************* carousel *******************/




.carousel-fade .carousel-item {
 opacity: 0;
 transition-duration: 0.6s;
 transition-property: opacity;
}

.carousel-fade  .carousel-item.active,
.carousel-fade  .carousel-item-next.carousel-item-left,
.carousel-fade  .carousel-item-prev.carousel-item-right {
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-right {
 opacity: 0;
}

.carousel-fade  .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-prev {
 transform: translateX(0);
 transform: translate3d(0, 0, 0);
}



/********* image container ***************/


.fadein {
  /*position: relative;*/
  border-radius: 50%;
  overflow: hidden;
}
.fadein:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.fadein img {
  position: absolute;
  border-radius: 50%;
/*  -webkit-animation-name: fade;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;*/
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-duration: 9s;
  display: block;
  line-height: 0;
}




@keyframes fade {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  33% {
    opacity: 1;
  }

  53% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.f1 {
  webkit-animation-delay: 0s;
}

.f2 {
  animation-delay: 3s;
}

.f3 {
  animation-delay: 6s;
}