/* #Base 960 Grid
================================================== */

.container                                  { position: relative; width: 940px; margin: 0 auto; padding: 0; }
.container .column                          { float: left; display: inline; margin-left: 20px; margin-bottom: 20px; position:relative;}
.row .column:first-child					{ margin-left: 0px;}

/* Base Grid */
.container .one-eight.column		   { width: 100px; }
.container .one-fourth.column	       { width: 220px; }
.container .one-half.column			   { width: 460px; }
.container .three-fourths.column	   { width: 700px; }
.container .full-width.column	       { width: 940px; }
.container .one-third.column		   { width: 300px; }
.container .two-thirds.column		   { width: 620px; }

/* Left content */
#primary-left .one-half.column			{ width: 310px; }
#primary-left .one-third.column			{ width: 200px; }
#primary-left .two-thirds.column		{ width: 420px; }
#primary-left .one-fourth.column		{ width: 145px; }
#primary-left .three-fourths.column		{ width: 475px; }
#primary-left .full-width.column		{ width: 640px; }	
#primary-left .one-eight.column			{ width: 62px; }

/* Right content */
#primary-right .one-half.column			{ width: 310px; }
#primary-right .one-third.column		{ width: 200px; }
#primary-right .two-thirds.column		{ width: 420px; }
#primary-right .one-fourth.column		{ width: 145px; }
#primary-right .three-fourths.column	{ width: 475px; }
#primary-right .full-width.column		{ width: 640px; }	
#primary-right .one-eight.column		{ width: 62px; }



/* What and when to display
================================================== */        

/* Hide on Phones */
@media only screen and (max-width: 768px) {
    .phone-hidden, .tablet-visible, .desktop-visible {
        display: none;

    }
  h2 {
    font-size: 14pt;
  }
  h3{
      font-size: 10pt;
  }
}

@media only screen and (max-width: 480px) {
    h2 {
        font-size: 12pt;
    }
    h3{
        font-size: 12pt;
    }
}


/* Hide on Tablets */
@media only screen and  (min-width: 768px) and (max-width: 980px) {
    .phone-visible, .tablet-hidden, .desktop-visible {
        display: none;
    }
    h2 {
        font-size: 14pt;
    }
    h3{
        font-size: 14pt;
    }
     h4{
       font-size: 9pt; 
    }
    h5{
       font-size: 9pt; 
    }
}

/* Hide on Desktops */
@media only screen and  (min-width: 980px) {
    .phone-visible, .tablet-visible, .desktop-hidden {
        display: none;
    }

}  


/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .sf-menu { display:none;}
    .mobileMenu {
        display: block;
        width: 100%;
        border: 1px solid #e5e5e5;
        outline: none;
        cursor: pointer;
        margin-bottom: 0px;
    }
    #primary-fullwidth							{ width: 748px;}
    #primary-left, #primary-right				{ width: 508px;}
    #sidebar 	{ width:220px;}
    .container                                  { width: 748px; }
    .container .column							{ margin-left: 20px; margin-right: 0px;  }

    /* Columns */
    .container .one-eight.column				{ width: 76px; }
    .container .one-fourth.column				{ width: 172px; }
    .container .one-half.column					{ width: 364px; }
    .container .three-fourths.column			{ width: 556px; }
    .container .full-width.column				{ width: 748px; }
    .container .one-third.column				{ width: 236px; }
    .container .two-thirds.column				{ width: 492px; }

    /* Left content */
    #primary-left .one-half.column			{ width: 244px; }
    #primary-left .one-third.column			{ width: 156px; }
    #primary-left .two-thirds.column		{ width: 332px; }
    #primary-left .one-fourth.column		{ width: 112px; }
    #primary-left .three-fourths.column		{ width: 376px; }
    #primary-left .full-width.column		{ width: 508px; }	
    #primary-left .one-eight.column			{ width: 46px; }

    /* Right content */
    #primary-right .one-half.column			{ width: 244px; }
    #primary-right .one-third.column		{ width: 156px; }
    #primary-right .two-thirds.column		{ width: 332px; }
    #primary-right .one-fourth.column		{ width: 112px; }
    #primary-right .three-fourths.column	{ width: 376px; }
    #primary-right .full-width.column		{ width: 508px; }	
    #primary-right .one-eight.column		{ width: 46px; }

    /* devices */
    .lrs .device-preview {width: 172px !important;background-image: url(..images/leadretrieval-style1-shadow-172.png) !important; padding-bottom: 9px !important;}		
    .lrs .device-description {width: 364px !important;}		
    .lrs .device-preview a.show-image, 
    .lrs .device-preview a.show-video {bottom:9px !important;}
    .lrs .device-reservation { width:172px !important;}

    /* Special offers */
    .special-offer .offer-preview {width: 140px !important;background-image: url(..images/leadretrieval-style1-shadow-140.png) !important;	padding-bottom: 8px !important;}
    .special-offer .offer-description {width: 218px !important;}

}


/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {		
    /*Menu*/
    .sf-menu {display: none !important;}
    .mobileMenu {
        display: block;
        width: 100%;
        border: 1px solid #e5e5e5;
        outline: none;
        cursor: pointer;
        margin-bottom: 0px;
    }

    /* Contact inputs */
    #contact-human p {
        width: 100%;
        margin: 0 0 15px 0;
        float: none;
        display:block;
    }
    #contact-human div {float: none; width: 100%;}
    #contact-human label {width: 30%; float: left;}
    #contact-human input {width: 70%;}

    /* Tabs */

    /*Containers*/
    #primary-fullwidth	{ width: 300px;}
    #primary-fullwidth							{ width: 300px;}
    #primary-left, #primary-right				{ width: 300px;}
    #sidebar 	{ width:300px;}
    .container { width: 300px; }
    .container .column { margin: 0 0 20px 0; }

    .container .one-eight.column,
    .container .one-fourth.column,
    .container .one-half.column,
    .container .three-fourths.column,
    .container .full-width.column,
    .container .one-third.column,
    .container .two-thirds.column  { width: 300px; }

    /* Left and right content */
    #primary-left .one-half.column,
    #primary-left .one-third.column,
    #primary-left .two-thirds.column,
    #primary-left .one-fourth.column,
    #primary-left .three-fourths.column,
    #primary-left .full-width.column,
    #primary-left .one-eight.column,
    #primary-right .one-half.column,
    #primary-right .one-third.column,
    #primary-right .two-thirds.column,
    #primary-right .one-fourth.column,
    #primary-right .three-fourths.column,
    #primary-right .full-width.column,
    #primary-right .one-eight.column		{ width: 300px; }

    /* devices Style 1 */
    .lrs .device-preview, 
    .lrs .device-reservation,
    .lrs .device-reservation-ad,
    .lrs .device-description {width: 300px !important; margin-left: 0px !important;}

    .lrs .device-preview {background-image: url(..images/leadretrieval-style1-shadow-300.png) !important; padding-bottom: 16px !important;}

    .lrs .device-preview a.show-image, 
    .lrs .device-preview a.show-video {bottom:16px !important;}

    /* Reservations */
    .reservation-form .personal-details div,
    .reservation-form .reservation-details div,
    .reservation-form .date-details .booking-calendar {
        float:none !important;
        width:100% !important;
        margin-right:0 !important;
    }

    /* Special offers */
    .special-offer .offer-preview {width: 300px !important;background-image: url(..images/leadretrieval-style1-shadow-300.png) !important;	padding-bottom: 16px !important;}
    .special-offer .offer-description, .special-offer .offer-reservation {width:100% !important;margin-left:0 !important;}

    /* Header */
    #logo { float:none !important; margin-bottom:30px !important;}

    /* Call to action */
    .call-to-action { text-align:center;}
    .call-to-action .button {float:none !important; margin-right:0px;}
    .call-to-action h3 { float:none !important; margin-bottom: 20px !important;}

}


/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {	
    #primary-fullwidth	{ width: 420px;}
    #primary-left, #primary-right				{ width: 420px;}
    #sidebar 	{ width:420px;}

    .container { width: 420px; }
    .container .column { margin: 0 0 20px 0; }

    .container .one-eight.column,
    .container .one-fourth.column,
    .container .one-half.column,
    .container .three-fourths.column,
    .container .full-width.column,
    .container .one-third.column,
    .container .two-thirds.column { width: 420px; }

    /* Left and right content */
    #primary-left .one-half.column,
    #primary-left .one-third.column,
    #primary-left .two-thirds.column,
    #primary-left .one-fourth.column,
    #primary-left .three-fourths.column,
    #primary-left .full-width.column,
    #primary-left .one-eight.column,
    #primary-right .one-half.column,
    #primary-right .one-third.column,
    #primary-right .two-thirds.column,
    #primary-right .one-fourth.column,
    #primary-right .three-fourths.column,
    #primary-right .full-width.column,
    #primary-right .one-eight.column		{ width: 420px; }

    /* devices Style 1 */
    .lrs .device-preview, 
    .lrs .device-reservation, 
    .lrs .device-description	{width: 420px !important; margin-left: 0px !important;}
    .lrs .device-preview 
    {background-image: url(../images/accommodation-style1-shadow-420.png) !important; padding-bottom: 23px !important;}

    .lrs .device-preview a.show-image, 
    .lrs .device-preview a.show-video {bottom:23px !important;}

    /* Reservations */
    .reservation-form .personal-details div,
    .reservation-form .reservation-details div,
    .reservation-form .date-details .booking-calendar {
        float:none !important;
        width:100% !important;
        margin-right:0 !important;
    }

    /* Special offers */
    .special-offer .offer-preview { width:420px !important;background-image: url(..images/leadretrieval-style1-shadow-420.png) !important;	padding-bottom: 23px !important;}
    .special-offer .offer-description, .special-offer .offer-reservation {width:100% !important;margin-left:0 !important;}

    /* Header */
    #logo { float:none !important; margin-bottom:30px !important;}

}

.grid-container {
    display: grid;
    padding: 3px;
}

.grid-col-1 {
    grid-template-columns: auto;
}

.grid-col-2 {
    grid-template-columns: auto auto;
}

.grid-col-3 {
    grid-template-columns: auto auto auto;
}

.grid-col-4 {
    grid-template-columns: auto auto auto auto;
}

.grid-item {
    /*background-color: rgba(255, 255, 255, 0.8);*/
    /*border: 1px solid rgba(249, 252, 255, 0.8);*/
    padding: 5px;
    /*font-size: 30px;*/
    text-align: center;
}

.grid-item-divide-x{
    border-right: 1px white solid;
}