/*
 Theme name: PH - Paradise Heights
 Version: 2.6.6
 Description:  Because we don't know either...
 Author: Gordon Langley vs Sean Alexander
 Author URI: http://www.fluffytech.co.uk
 Template: twentytwelve
*/

/*///////////////Get the fonts///////////////*/


@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600&display=swap');


/*///////////////Get the fonts ENDS ///////////////*/



/*/////////////// Sean's style IMPORTED from html PHv001  ///////////////*/


/* fluffytech: Hide Amin Bar on frontend - but allow rank math to be shown */
#wpadminbar { display:none !important;}

/*font size & color*/
	body { font-family: 'Roboto Mono', monospace; color:#616161; font-size: 12px;}
  
a {color: #616161;}

@media screen and (max-width: 800px) {
	body {font-size: 13px;}
}

/*basic link hover*/

a:hover {color: #333}

/*body padding - responsive*/

body {padding: 0;}

@media screen and (max-width: 1700px) {
	body {padding: 0;}
}

@media screen and (max-width: 1279px) {
	body {padding: 0;}
}

@media screen and (max-width: 465px) {
	body {padding: 0;}
}

/*logo and tiles*/
	#logo-and-tiles {min-width: 100%; height: auto; text-align: left;position:relative; margin-bottom: 2em;}

/*dark tint
#logo-and-tiles:after {content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background:rgba(0,0,0,.15);}
.desktop-logo {z-index: +1;}*/



/*just tiles container*/

.just-tiles {font-size: 0; line-height: 0;}

/*just tiles images*/
    
.just-tiles img {width: 100%;}

/*actual tiles responsive*/

.ph-tile {display:inline-block; width: 33.333%;}

.ph-tile img {margin-bottom: 0 !important;}


/*@media screen and (max-width: 800px) {
	.ph-tile {width: 50% !important;}
}

@media screen and (max-width: 799px) {
	.ph-tile {width: 100% !important;}
}*/


/*logo*/
	.desktop-logo  {
	   position: absolute;
	   top: 50%;
	   left: 50%;
	   text-align: center;
	   width: 100%;
	   margin-left: auto;
	   margin-right: auto;
       transform:translate(-50%,-50%);
		
	}

@media screen and (max-width: 799px) {
	.desktop-logo {top: 33vw}
}


    
/*logo image*/
    .desktop-logo img {width: 42% !important;text-align:center; max-width: 1200px;margin-left: auto; margin-right: auto; margin-bottom: 0 !important}


@media screen and (max-width: 800px) {
	.desktop-logo img {width: 65% !important;}
}

/*@media screen and (max-width: 414px) {
	.desktop-logo img {width: 90% !important;}
}*/

/*message and address float*/

.message, .address {text-align:center;}

.message {margin: 20px 0 0!important;}
.address {margin:  0 0 !important;}

@media screen and (max-width: 1440px) {
.address {margin-top: 10px !important;}
}

@media screen and (max-width: 1024px) {
	.message, .address {padding-left: 5%; padding-right: 5%;}
}


/*responsive for message and address*/

.message, .address {margin:20px 0 30px; word-spacing: -0.08em; letter-spacing: 0.05em;}

	/* animation*/
    #logo-and-tiles {animation-name: fadeup; animation-duration: 2s;}
	.desktop-logo {animation-name: fadeup; animation-duration: .5s; opacity: 0; animation-fill-mode: forwards; animation-delay: 0s; }
.message, .address {animation-name: fadeup; animation-duration: 2s; opacity: 0; animation-fill-mode: forwards; animation-delay: 1s; }


    /* animation keyframes*/
	@keyframes fadeup {
	   0% {
	   opacity: 0;
	 }
	 100% {
	   opacity: 1;
	 }
	}



/*borders above breakpoint*/

@media screen and (max-width: 800px) {
	.ph-tile {position:relative; border-bottom: solid .5vw #fff;}
	/*border after 1 and 2*/
	.ph-tile:nth-of-type(1):after, .ph-tile:nth-of-type(2):after, .ph-tile:nth-of-type(4):after, .ph-tile:nth-of-type(5):after {content:""; background: #fff; z-index: +1; width: .5vw; height: 100%; position:absolute; right: 0;
}
}
	
/*borders above breakpoint*/
@media screen and (min-width: 800px) {
	.ph-tile {position:relative}
	.ph-tile:nth-of-type(1):after, .ph-tile:nth-of-type(2):after, .ph-tile:nth-of-type(4):after, .ph-tile:nth-of-type(5):after {content:""; background: #fff; z-index: +1; width: .5vw; height: 100%; position:absolute; right: 0;}
	.ph-tile:nth-of-type(1):before, .ph-tile:nth-of-type(2):before {content:""; background: #fff; z-index: +1; height: .5vw; width: 100%; position:absolute; bottom: 0;}
	.ph-tile:nth-of-type(3):before  {content:""; background: #fff; z-index: +1; height: .5vw; width: 100%; position:absolute; bottom: 0;}
}

/*bring logo to front*/	
.desktop-logo {z-index: +2}


/*/////////////// Sean's style IMPORTED from html PHv001 ENDS ///////////////*/



/*/////////////// GORDON's style whoop whoop look at me go  ///////////////*/

body {
    background-color: #fff;
	font-family: 'Roboto Mono', monospace !important; color:#616161;
}

body .site {
	box-shadow: none;
	margin-top: 0px !important;
}


.site-header, .entry-header .entry-title {
    display: none;
    margin-top: 0 !important;
	margin-bottom: 0 !important;
    padding: 0 !important;
}

.entry-header {margin-bottom: 0 !important;}


.entry-content p, .entry-summary p, .comment-content p, .mu_register p {
	margin: 0 0 0px;
	 margin: 0 0 0;

}

.site-content {
    margin: 0px !important
}

.site-content article {
    border-bottom: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

/*/////////////// GORDON's style whoop whoop look at me go ENDS - thank god ///////////////*/


/*/////////////// CALENDAR style ////////////////////*/

.bk_calendar_frame {width: 100% !important; max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 4em; text-align:center !important;}

.booking_form .form-group .controls select, .booking_form select, .booking_form textarea, .booking_form input[type="text"] {
    width: 97.5% !important;  
}


@media screen and (min-width: 600px) {
	.wpbc_structure_form {width: 600px !important; width: 100%; margin-left: auto !important; margin-right: auto !important;}
	
}

.wpbc_structure_form input, .wpbc_structure_form textarea {border-radius: 0 !important;}

.wpbc_structure_form  button {border-radius: 0 !important; font-size: 100% !important; min-width: 80px;}


/*/////////////// CALENDAR style ENDS ///////////////*/



/*/////////////// Sean's style copied from Bridge + bastardized by G - not sure what's need ed here : P///////////////*/

/*don't show page titles or site-title*/

.site-title {display:none;}

.entry-header .entry-title {/*! display:none; */; text-align:center; margin-top: .5em !important}

@media screen and (max-width: 1024px) {
    .entry-header .entry-title {margin-top: 0em !important}  
}

@media screen and (max-width: 600px) {
    .entry-header .entry-title {margin-top: 0em !important;}  
}

@media screen and (max-width: 500px) {
    .entry-header .entry-title {margin-top: 0px !important;}  
}


/*- Full site content width-*/


@media screen and (min-width: 1025px) {
    .site {max-width: 100%; width: calc(1024px - 40px) !important;}
    .site {margin: 0px auto 0 auto !important;}
}


@media screen and (max-width: 1024px) {
    .site {max-width: 100%; width: calc(100% - 40px) !important;}
    .site {margin: 0px auto !important;}
}

@media screen and (max-width: 600px) {
    .site {max-width: 100%; width: calc(100% - 20px) !important;}
    .site {margin: 0px auto !important;}
}


body .site {padding: 0 0; overflow-x:hidden !important;}

.site-content {margin: 20px 0 0 0 !important; max-width: 100% !important;}

@media screen and (max-width: 600px) {
	.site-content {margin: 10px 0 0 0 !important;}
}

/*centered content manilla*/


body.home #content {background: #fff; margin:0em 0 0 0;}

@media screen and (max-width: 768px) {
   body.home #content {background: #fff; }
}

/*breakpoint*/
@media screen and (max-width: 600px) {
  body.home #content {background: #fff; margin:0 0 0 0;}  
}

/*breakpoint*/
@media screen and (max-width: 500px) {
  body.home #content {background: #fff; margin:0 0 0 0;}  
}

/*-content width ENDS-*/

/*///////////////Footer///////////////*/

footer[role="contentinfo"] {margin-top: 100px; border-top: 0; min-width: 100%; font-size:100%; position:relative; overflow-x:hidden !important; padding: 1em 0 2em;}


.tb-footer-address, .tb-footer-email {text-transform:uppercase; font-weight: 600; line-height: 1; transform:rotate(-1deg); font-size: 110%; position:relative; left: -1%}

.tb-footer-email {margin-top: 3em; margin-bottom: 6em !important;}

@media screen and (max-width: 604px) {
   .tb-footer-email {margin-bottom: 8em !important;} 
}

@media screen and (max-width: 460px) {
   .tb-footer-email {margin-bottom: 12em !important;}
    .tb-footer-address, .tb-footer-email {font-size: 120%}
}

footer {overflow:hidden;}


@media screen and (max-width: 1024px) {
     .site {margin: 20px auto 0 !important;}
}

@media screen and (max-width: 600px) {
    .site  {margin: 30px auto 0 !important;}
}

@media screen and (max-width: 414px) {
    .site-info:after {bottom: -20px; overflow:visible !important; height: 140px}
}


.tb-footer-email a {border-bottom: 3px solid; text-decoration:none;}

.tb-footer-email a:hover {border-bottom: 3px solid rgb(255,255,255);}

.tb-footer-copyright, .al-credit {text-transform:uppercase; font-weight: 500; margin: 20px 20px 0px 20px ;}

@media screen and (min-width: 1025px) {
    .tb-footer-copyright {float:left;} .al-credit {float:right; position:relative; right: 2px;}
}

@media screen and (max-width: 1024px) {
    .tb-footer-copyright {float:left;} .al-credit {float:right; position:relative; right: 2px;}
}

@media screen and (max-width: 862px) {
    .tb-footer-copyright {max-width: 85%; text-align:left; line-height: 1.2; margin-top: 5px; font-size: 90%;} .al-credit {font-size: 90%;}
}

@media screen and (max-width: 466px) {
    .tb-footer-copyright {font-size: 60%;text-align:left;} .al-credit {font-size: 60%; margin-top: 2px;}
}


.site-info {min-width: 100% !important;background-color: none !important; width: 100%; margin-left: 0; margin-right: 0;font-size: 72%; padding-bottom: 20px; padding-top: 0px;padding-left: 0 !important; margin-top: 0px; z-index:+1 !important; text-align:center;}

@media screen and (max-width: 414px) {
    .site-info {font-size: 75%}
}


.al-credit a:after {content:"";display:inline-block; width: 9px; height: 9px; border: 3px solid;box-sizing: border-box; transform:rotate(45deg); margin-left: 6px;}

.al-credit a {text-decoration:none;}

.site-info a:hover {color: #333 !important;}

/*new footer elements*/



@media screen and (max-width: 500px) {
.tb-footer-find-us img {width: 100%;max-width: 80% !important; margin-left: auto; margin-right: auto; margin-bottom: 2em;}
}






/*///////////////Footer ENDS///////////////*/



/*/////////////// Sean's style copied from Bridge ENDS ///////////////*/




/*///Rounded corners and drop shadow off all images///*/


.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
    border-radius: 0;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/*///Rounded corners and drop shadow off all images ENDS///*/


/*//////next text panels///////*/

/*rental info*/

.booking-info {text-align:center; margin-bottom: 4em; line-height: 1.4; hyphens: none; padding-top: 0em !important}

#reservations {padding-top: 3em !important}

.booking-info h1, .booking-info h2 {font-size: 120% !important; padding: 2em}


.booking-info p {margin-bottom: 2em}

@media screen and (min-width: 800px) {
.booking-info {width:100%; max-width: 600px; margin-left: auto; margin-right: auto; }
}

@media screen and (max-width: 500px) {
	.booking-info {margin-bottom: 2em;}
	.booking-info h1,.booking-info h2 {padding-top: 3em;}
	.booking-info p {margin-bottom: 1em}
	.booking_form_div input[type="text"],
    .booking_form_div select,
    .booking_form_div textarea {
        max-width: 94% !important;
        margin: auto !important;}
}









/*///////Calendar entries////////*/



.wpbc_timeslot_day_bg_as_available .datepick-inline .date_available {
   background: #fff;  
}

.datepick-inline .datepick-one-month .datepick .datepick-current-day a {color: #fff !important}

.datepick-inline .datepick-one-month .datepick .datepick-current-day {background-color: #333 !important; }

/* .datepick-inline .datepick-one-month .datepick a {color: #333 !important; text-shadow: 0 0px 0 #aaa;} */


.datepick-inline .date_approved {
    background: url("/wp-content/themes/ph-v002/images/2_by_2_cccccc.png") !important; text-shadow: 0 0px 0 #aaa !important; color: rgba(97,97,97,.2) !important;
}


.datepick-header span {font-size: 100% !important; color: #616161; margin-bottom: 2em !important; display:inline-block;}


/*booking received*/

.datepick-inline .date2approve {
color: #fff;
font-weight: 600;
text-shadow: 0 0 0 #da7 !important;
background-color: #000 !important;
}

/*border-color for all inputs*/

.booking_form_div textarea, .booking_form_div input[type="text"], .booking_form_div select {border-color: #ccc !important;}


/*nicer arrows*/

.datepick-next a {position:relative; color: #fff !important;}
.datepick-next:after {content: "\2192"; font-size: 32px; position:absolute; right: 0;width: 100%; height: 100%; top: 0; pointer-events:none;}

.datepick-prev a {position:relative; color: #fff !important;}
.datepick-prev:after {content: "\2190"; font-size: 32px; position:absolute; right: 0;width: 100%; height: 100%; top: 0; pointer-events:none;}

/*warnings*/

.wpdev-help-message.alert.alert-warning, .wpdev-help-message .alert.alert-warning {margin: 0 auto !important;background:#cccccc !important; color: #333 !important;
	text-shadow: 0 0 0 #fff !important; text-align:center !important; border: 0px none !important;
width: 100%; border-radius: 0 !important; font-size: 100% !important; padding-left: 10px !important; padding-right: 10px !important; display:inline-block;}


/*key*/

.key span {display:inline-block; width: 16px; height: 16px; border: 1px solid #ccc; position:relative; top: 4px; margin-right: 10px; margin-left: 20px;}

@media screen and (max-width: 500px) {
	.key {font-size: 90%; margin-left: auto; margin-right: auto;}
	.key span {margin-right: 5px; margin-left: 10px;}
}
/*available*/
.key span:nth-of-type(1) {}
/*Pending*/
.key span:nth-of-type(2) {background: #333;}
/*available*/
.key span:nth-of-type(3) {background: url("/wp-content/themes/ph-v002/images/2_by_2_cccccc.png") !important;}

/*no more dates in bold please*/
.block_hints .block_free a, .block_hints .block_time, .datepick-inline .date_available a {
font-weight: normal !important; 
}
/*all dates in grey*/

.wpbc_timeslot_day_bg_as_available .datepick-inline .date_available a {
  color: #757575 !important;
  text-shadow: 0 0px 0 rgba(255,255,255,0) !important;
}
/*no more dates in bold please ENDS*/


/* Here comes Gordon!!*/
.full-width img {
   width: 100%; margin-bottom: .25vw;
  }


/*//////////////tt major and minor buttons//////////////*/


a.tt-button {padding: .9em 2em 1em 2em; border: 2px solid #333; line-height: 1; letter-spacing: 0.05em; font-weight: 500; display:inline-block; margin: 0em 0 2em 0; }


a.tt-minor-button {padding: .8em 2em 1em 2em; border: 2px solid #aaa; line-height: -5; letter-spacing: 0.05em; font-weight: 500; display:inline-block; margin: 0 0 0 0; background: none; text-transform:none; transition: all ease .3s !important; color: #aaa !important; }

body.single-product .button.tt-minor-button {}

a.tt-minor-button:hover, a.tt-minor-button:focus {padding: .8em 2em 1em 2em; border: 2px solid #333333; background: none; text-transform:none; color: #333 !important;}

a.tt-button.tt-subscribe {font-size: 92%;}

a.tt-button.tt-major-button {font-size: 110%; text-decoration: none; font-weight: bold;}

.tt-fifty-intro a.tt-button.tt-major-button {font-size: 65%;}



/*responsive 768*/
@media screen and (max-width: 768px) {
a.tt-button.tt-major-button {transform:scale(1); transform-origin: top left}
}

/*arrow down*/

.tt-arrow-down {position:relative;}
.tt-arrow-down:after {display:inline-block; content: "\f063"; font-family: 'FontAwesome'; font-size: 75%; margin-left: 1em;}

/*//////////////tt major and minor buttons//////////////*/

/*////////////// YouTube Responsive Conatiner //////////////*/
.youtube-responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:0px;
margin-bottom: 10px;
height:0;
overflow:hidden;
}

.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/*define the div size to constrain the image size*/
.bottle-top {
width: 50px !important;
height: 50px !important;
margin-top: 50px !important;
}

/*then center the contents*/
.bottle-top {text-align:center; margin:auto;}

/* Gordon's remove dotted line around bottletop link */
a, a:active, a:focus {
   outline: none;
}