/* ======================================================

  RESPONSIVE.CSS

=========================================================*/

/* smallest */
@media only screen and (max-width: 767px) {  
  .home .head-banner {
    background: #565043;
    padding-bottom: 2em;
  }
  .home .head-banner img {
    display: block;
  }
  .home .head-banner .overlaid-content {
    position: relative;
    top:0;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);

    padding-top: 2em;
  }
  .img-popup {
    cursor: default;
  }
}


/* #Media Queries - for mobile first
================================================== */

/* >= 768 (tablet portrait and up - uses desktop design) */
@media only screen and (min-width: 768px) {  
   
    
  .logo {
    z-index: 2;
      width: 110px;
  }
  header {

    /*min-height: 10em;*/
  }
  header .menu {
    z-index: 1; 
    margin-top: -53px;
  }

  /* --- sticky header --- */
  .sticky {
    padding-bottom: 40px;
  }
  /*logo text fades out on scroll start*/
  .flaggedScroll header {
    padding-bottom: 20px;
  }

  /* ---- MAIN CONTENT AREA ---- */

  header.sticky + .main { 
    -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    margin-top: 46px;
  }
  .flaggedScroll header + .main {
    margin-top: 16px;
  }

  /* PARALLAX HEADER BANNER LAYER (not homepage) */

  .home h1 {
    font-size: 4.8em;
    font-weight: 300;
  }

  .no-js .head-banner {
    position: relative;
  }
  .head-banner {
    position: fixed;
      padding-bottom: 36%;
  }
  .head-banner + section {
      margin-top: 44%;
  }
  .no-js .head-banner + section {
      margin-top: 0;
  }

  /* to accommodate changes to the banners */
  .bg_img {
    -moz-transition: all 1.5s ease;
      -o-transition: all 1.5s ease;
      -webkit-transition: all 1.5s ease;
      transition: all 1.5s ease;
  }
  .bg_img .dark_bg {
    -moz-transition: all 1.5s ease;
      -o-transition: all 1.5s ease;
      -webkit-transition: all 1.5s ease;
      transition: all 1.5s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 36%;  
    /*background-color: #000;
      opacity: .8;*/
  }
  .bg_img .giffgaff {
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -webkit-transition: all 1.5s ease;
    transition: all 1.5s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 55%;
    z-index: 99999;
  }

  .flaggedScroll .bg_img .dark_bg,  
  .lightenBanner .bg_img .dark_bg {
    opacity: 0;
  }


  /* HOMEPAGE HEADER BANNER */
  .home .bg_img .dark_bg {
    -moz-transition: all 2.5s ease;
      -o-transition: all 2.5s ease;
      -webkit-transition: all 2.5s ease;
      transition: all 2.5s ease;
  }
  .home .head-banner {
    position: relative;
      padding-bottom: 36%;
  }
  .home .bg_img {
    background-image: url(../img/banner-bg_home_v2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /*background-attachment: fixed;*/
    padding-bottom: 55%;
  }
  .home .bg_img img {
    display: none;
  }
  

  /* extra for homepage animated effect */
  .home .bg_img .dark_bg {    
      padding-bottom: 55%;  
    /*background-color: #565043;
      opacity: 1;*/
    background-color: #000;
    opacity: .8;
  }
  /*.home .bg_img .giffgaff{
    background-image: url(/uploads/images/giffgaff-splash.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }*/
  .bg_img .overlaid-content{
    -moz-transition: all 1.5s ease;
      -o-transition: all 1.5s ease;
      -webkit-transition: all 1.5s ease;
      transition: all 1.5s ease;
    opacity: 1;
  }
/*.bg_img .giffgaff{
    -moz-transition: all 2.5s ease;
    -o-transition: all 2.5s ease;
    -webkit-transition: all 2.5s ease;
    transition: all 2.5s ease;
    opacity: 1;
  }*/
  .head-banner:after {
    display: none;
  }

  /* home main image fade effect */
  .home .bg_img.frame2 .dark_bg {
    background-color: #000;
    opacity: .8;
  }
  .home .bg_img.frame3 .dark_bg {
    opacity: 0;
  }
  /*.home .bg_img.frame2 .giffgaff {
    opacity: 0;
  }*/
  .home .bg_img.frame3 .overlaid-content {
    opacity: 0;
  }

  .home .head-banner + section {
    margin-top: 55%;
  }

  .home .overlaid-content .inner,
  .building .overlaid-content .inner {
    width: 400px;
  }

  /* ALL HEADERS */
  .head-banner:after {
    content: '';
      background: url(../img/arrow_banner-down.png) no-repeat center;
      width: 100%;
      height: 34px;
      position: absolute;
      bottom: 10%;
      left: 0;
  }

  /* ALL NON_HOMEPAGE HEADER BANNERS */

  .building .bg_img {
    background: #565043 url(../img/banner-bg_building_v2.jpg) no-repeat center top;
    background-size: 110%;
  }
  .building .bg_img .dark_bg {
    background: url(../img/banner-bg_building_dk_v2.jpg) no-repeat center top;
    background-size: 110%;
  }
  .location .bg_img {
    background: #565043 url(../img/banner-bg_location.jpg) no-repeat center top;
    background-size: 110%;
  }
  .location .bg_img .dark_bg {
    background: url(../img/banner-bg_location_dk.jpg) no-repeat center top;
    background-size: 110%;
  }
  .amenities .bg_img {
    background: #565043 url(../img/banner-bg_amenities.jpg) no-repeat center top;
    background-size: 110%;
  }
  .amenities .bg_img .dark_bg {
    background: url(../img/banner-bg_amenities_dk.jpg) no-repeat center top;
    background-size: 110%;
  }
  .gallery .bg_img {
    background: #565043 url(../img/banner-bg_gallery.jpg) no-repeat center top;
    background-size: 110%;
  }
  .gallery .bg_img .dark_bg {
    background: url(../img/banner-bg_gallery_dk.jpg) no-repeat center top;
    background-size: 110%;
  }
  .contact .bg_img {
    background: #565043 url(../img/banner-bg_contact.jpg) no-repeat center top;
    background-size: 110%;
  }
  .contact .bg_img .dark_bg {
    background: url(../img/banner-bg_contact_dk.jpg) no-repeat center top;
    background-size: 110%;
  }
  .downloads .bg_img {
    background: #565043 url(/uploads/images/new2020/A86A2778_Reception.jpg) no-repeat center top;
    background-size: 110%;
  }
  .downloads .bg_img .dark_bg {
    background: url(/uploads/images/new2020/A86A2778_Reception_dk.jpg) no-repeat center top;
    background-size: 110%;
  }


  /* BACKGROUNDS */
  .panel-bg img {
    display: none;
  }

  /* add transparency bg to add contrast to texts over images */
  .add-contrast {
    padding: 2.5em;
    box-sizing: content-box;

  }
  .bg_dark .add-contrast {
    background: rgba(0,0,0, .7);
  }
  .bg_grey .add-contrast {
    background: rgba(255,255,255, .7);
  }

  /* image backgrounds */  
  /* No longer used for amenities
  .panel-bg1 {
    background: #565043 url(../img/panel_amenities1.jpg) no-repeat center;
    background-size: cover;
  }
  .panel-bg2 {
    background: #565043 url(../img/panel_amenities2.jpg) no-repeat center;
    background-size: cover;
  }
  .panel-bg3 {
    background: #565043 url(../img/panel_amenities3.jpg) no-repeat center;
    background-size: cover;
  }*/

  /* AMENITIES */

  .img-bg-amenities { /* bg img for desktop */
    width: 60%;
    float: right;
    display: block;
    background: url(../img/map_amenities.jpg) no-repeat center;
    background-size: contain;
    padding-bottom: 48%;
  }
  .img-bg-amenities img {
    display: none;
  }
  .legends {
    width: 19%;
    padding-right: 1%;
  }

  /* ACCOMMODATION */
  .panel-bg4  {
    background: #565043 url(../img/panel_accommodation4.jpg) no-repeat center;
    background-size: cover;
  }


  section .content {
    padding: 6% 0;
  }
  .content .inner {
    width: 39%;
    min-width: 400px;
  }





  /* FOOTER  */

  .copyright {
    display: inline-block;
    width: 50%;
    padding-top: 10px;
    margin-bottom: 10px;
    float: left;
  }
  footer ul {
    float: right;

  }
  footer li {
      width: 100px;
      height: 90px;
      margin-left: 46px;
      margin-right: 0;
  }
  footer ul li:first-child {
    margin-left: 0;
  }

  /* centered paragraph  */
  .centered-para {
    width: 39%;
    text-align: center;
    margin: 0 auto;
  }

  /* TWO COL */

  .cols-2 {
    
  }
  .cols-2 .column-1 {
    width: 45%;
    float: right;
    padding-right: 30px;
  }
  .cols-2 .column-1:first-child {
    margin-right: 20px;
    float: left;
  }
  .cols-2 .column-1.column-sml{
    width: 295px;
  }
  /* for contacts page */

  .contact-box {
    min-height: 275px;
  }
  .contact-box.last-box {
    min-height: 0;
  }
  .contact-box .img-wrap {
    min-height: 155px;
  }
  .cols-2 .contact-box {
    width: 40%;
    float: left;
    margin-right: 5%;
  }
  .cols-2 .contact-box,
  .download-list li {
    width: 300px;
    float: left;
  }
  .cols-2 .contact-box img {
    width: auto;
  }

  /* ---- FLEXSLIDER ---- */
  .flexslider .slides p {
    width: 80%;
      margin: 1em auto;
  }
  .height-enforcer {
    /* force height - fading flexslider fix */
    padding-bottom: 74%;
  } 
  .location .height-enforcer {
    padding-bottom: 64%;/* no image caption*/
  }
  .flexslider .slides div {
    
  }

  .flex-direction-nav {
    display: block;
    z-index: 100;
    position: absolute;
    width: 100%;
    top: 50%; 
  }
  .flex-direction-nav a {
    height: 55px;
    opacity: 1;
    position: absolute;
      top: 0;
      width: 53px;
      text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transform:  translateY(-100%);
    -moz-transform:     translateY(-100%);
    -ms-transform:      translateY(-100%);
    -o-transform:       translateY(-100%);
    transform:          translateY(-100%);  
  }

  .flex-direction-nav a.flex-prev {
    left: 0;
    background: #fff url('../img/arrow_prev.gif') no-repeat center;
  }
  .flex-direction-nav a.flex-next {
    right: 0;
    text-align: right;
    background: #fff url('../img/arrow_next.gif') no-repeat center;
  }


  .flexslider .slides p:after {
    content: '';
    position: absolute;
    width: 145px;
    height: 2px;
    background: #f5cd2f;
    bottom:  -50%;
    left:  50%;
      -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }


  /* ---- PAGE SPECIFICS ---- */

  /* ACCOMMODATION */
  th,
  td {
    font-size: 1.8em;
  }
  tbody th {
      width: 25%;
  }
  .img-container.floorplans {
    padding-top: 0px;
      margin-top: 0px;
      margin-bottom: 6em;
      background: none;
  }

  /* AMENITIES */
  .panel-bg1,
  .panel-bg2,
  .panel-bg3 {
    height: 625px;
  }
  .content.top-left {
    /*position: absolute;
    left: 15%;*/
    top: 0;
  }
  .content.bottom-left {
    bottom: 0;
  }

  /* LOCATION */
  .cols-2 .column-1.column-sml {
      width: 45%;
      padding-right: 10px;
    }
    #map,
    .column-1.column-lrg  {
    width: 52%;
    height: 450px;
    float: right;
  }
  #map {
    margin-bottom: 0;
  }
  .column-1.column-lrg  {
    max-width: 580px;
    padding-right: 0;
  }

  .photo-map {
    background: url(../img/map_photo_1440.jpg) no-repeat center top;
    background-size: 100%;
    padding-bottom: 60%;
  }
  .photo-map img {
    display: none;
  }

/*show image as background and hide this asset from mobile*/
  .img-container {
    max-width: 1280px;
    margin: 0 auto;
    background: url(../img/map-lrg_aerial-photo.jpg) no-repeat center top;
    background-size: 100%;
    padding-bottom: 45%;
  }
  .img-container.floorplans {
    padding-bottom: 0;
  }
  .img-container img {
    display: none;
  }

  /* CONNECTIONS */
  .js .animation-flat {
    display: none;
  }
  
}

/* >= 960 */
@media only screen and (min-width: 960px) {
  

}

/* >= 1024 */
@media only screen and (min-width: 1024px) {
    h1 {
    font-size: 3em;
  }
  h2 {
    font-size: 2.6em;
  }
}
   
/* >= 1030 */
@media only screen and (min-width: 1100px) {
  /* ---- PAGE SPECIFICS ---- */

  /* AMENITIES */
  .panel-bg1,
  .panel-bg2,
  .panel-bg3,
  .panel-bg4 {
    height: 799px;
  }

  /* LOCATION */
  .cols-2 .column-1.column-sml {
      width: 295px;
      padding-right: 30px;
    }
    #map,
    .column-1.column-lrg {
    width: 715px;
    height: 390px;
    float: right;
  }

  .img-container img {
    max-width: 1280px;
  }


  .floorplans img {
    max-width: 650px;
  }
}
    


@media only screen and (min-width: 1780px) {

  .photo-map {
    background: url(../img/map_photo_1800.jpg) no-repeat center top;
    background-size: 100%;
    padding-bottom: 60%;
  }
  .img-container {
      padding-bottom: 772px;
  }
}