/*
 Theme Name:   Sydney Child
 Theme URI:    http://example.com/wordpress-theme-child/
 Description:  WordPress Child Theme
 Author:       Asser Munch
 Author URI:   http://becopenhagen.dk
 Template:     sydney
 Version:      1.0.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  sydneychild
*/

/*-------------------------------------------------------------- */

/* Variables */
:root {
/* colour scheme */
	--public-base: 80, 145, 178;
	--custom-base: 134,186,144;
	--float-base: 0,0,0;

	--menu-alpha: 0.9;

  --public-menu-bg: rgba(var(--public-base),var(--menu-alpha));
  --custom-menu-bg: rgba(var(--custom-base),var(--menu-alpha));
  --float-header-bg: rgba(var(--float-base),0.3);

	--quote-bg: rgba(var(--public-base), 0.7);
}

/* Responsive menu in bottom of mobile screens */
#mainnav-mobi {
	position: inherit;
	clear: both;
}
@media only screen and (max-width: 1024px) {
	header#masthead.site-header {
		position: fixed !important;
		top: unset;
		bottom: 0;
	}
/* extra buttons in menu */
	#menu-toggle-buttons button {
		float: right;
		height: 32px;
		width: 32px;
		padding: 0;
		margin: 0 32px 0 0;
		background-color: transparent;
    	background-repeat: no-repeat;
    	border: none;
	}
	#menu-toggle-buttons .book {
		background-image: url(img/becopenhagen_book.svg); 
	}
	#menu-toggle-buttons .call-us {
		background-image: url(img/becopenhagen_call-us.svg); 
	}
	#menu-toggle-buttons .get-here {
		background-image: url(img/becopenhagen_find-us.svg); 
	}

	.btn-menu {
	    display: flex;
	    float: initial;
    	font-size: 20px;
    	margin: 10px auto 0;		
    }
    .btn-menu:before {
	   	background-image: url(/wp-content/uploads/2017/01/beCPHdot64.png);
		background-size: 50px;
		background-repeat: no-repeat;
	    background-position: 5px 2px;
	    position: absolute;
    	top: -18px;
    	left: 0;
    	height: 93px;
    	width: 93px;
    	text-align: right;
    	padding-top: 20px;
    	margin-right: 20px;
    }
    .btn-menu.active {
    	float: right;
    }
	.btn-submenu {
		right: 90px;
	}

/* Hide logo graphic in responsive menu */
    #masthead #mainnav-mobi li.firstmenu > a:before {
		display: none;
	}
	#mainnav-mobi ul > li > a {
		text-align: right;
	}
	#mainnav-mobi {
		background-color: rgb(0,0,0,0.5);
		top:30px;
	}
	#mainnav-mobi ul > li {
		border: none;
	}
	#mainnav-mobi ul > li.facebook, #mainnav-mobi ul > li.google, #mainnav-mobi ul > li.instagram {
		float: right;
		padding: 10px 0;
	}
	#mainnav-mobi ul > li > a {
	    display: block;
	    text-decoration: none;
	    padding: 10px 32px;
	    color: #fff;
	}
	#menu-toggle-buttons button:focus {
		outline: none;
	}

	#mainnav-mobi ul > li.sect, body.page-template-page_front-page #mainnav-mobi ul > li.rent {
		clear: both;
		margin: 20px 0px;
    	padding: 0;
    	background-color: inherit;
	}
	#mainnav-mobi ul > li.sect > a, #mainnav-mobi ul > li.rent > a {
		background-color: rgb(0,0,0,0.5);
	}

 	.site-header {
    padding: 10px 0;
    z-index: 10000;
	}
	.container {
    	width: 100%;
	}
	.col-sm-4 {
    	width: 100%;
	}
	.site-header.float-header {
    	padding: 10px 0;
	}
	.go-top.show {
    	bottom: 76px;
	}
}

/* hide red book/buy buttons */
.product_cat-public a.button.product_type_external, .product_cat-public button.single_add_to_cart_button.button, .product_cat-public
 a.button.product_type_variable.add_to_cart_button {
	display: none;
}

/*MENU mods*/
@media screen and (min-width: 1025px) {
	#menu-toggle-buttons {
    	display: none;
	}
}
#content.page-wrap {
    padding: 20px 0;
}


/*red dot for home button*/
/* hide logo */
.col-md-4.col-sm-8.col-xs-12 {
	display: none;
}
/* Menu mods */
li.firstmenu > a:before {
	background-repeat: no-repeat;
	content: ' ';
	position:absolute;
}
/* top of page */
li.firstmenu > a:before {
	background-image: url(img/becopenhagen_logo.svg);
	top: -5px;
	left: 0;
    background-size: 200px;
    height: 86px;
	width: 200px;
	transition: all .1s ease-in-out;
}
/* scrolled down a bit */
#masthead.site-header.fixed.float-header li.firstmenu > a:before {
	background-image: url(img/becopenhagen_logo-dot.svg);
	background-size: 48px;
	top:0;
	left: 14px;
    height: 48px;
	width: 48px;
}

#mainnav div > ul > li.firstmenu > a {
    padding-left: 85px;
}
#mainnav .current-menu-item a, #mainnav-mobi .current-menu-item a {
	color: rgba(256,256,256,0.3);
}

/* Social links in menu*/
li.facebook > a {
	background-image: url(img/becopenhagen_facebook.svg);
}
li.instagram > a {
	background-image: url(img/becopenhagen_instagram.svg);
}
li.google > a {
	background-image: url(img/becopenhagen_google.svg);
}
li.facebook > a, li.instagram > a, li.tripadvisor > a, li.google > a {
	background-repeat: no-repeat;
	height: 32px;
	width: 32px;
}

/*MENU colors mod*/
/* body.error404 .site-header, .page-template-page-templates .site-header, .page-template-page_fullwidth .site-header, .page-template-default .site-header, .post-template-default .site-header, .product-template-default */
body .site-header {
    background-color: var(--public-menu-bg);
}
.page-template-page-custom .site-header, .post-template-page-custom .site-header, .category-faq-custom .site-header, .category-custom .site-header, .category-case-custom .site-header {
    background-color: var(--custom-menu-bg);
}
.float-header {
    background-color: var(--float-header-bg) !important;
}
/* section selector text color */
li.public.sect > a, body.page-template-page_front-page li.rent > a {
	color: var(--public-menu-bg) !important;
}
li.custom.sect > a {
	color: var(--custom-menu-bg) !important;
}


/*HIDE menu items according to template v.2.0*/
body.page-template-page-custom li.public, body.post-template-page-custom li.public, body.category-faq-custom li.public, body.category-custom li.public, body.category-case-custom li.public {
	display: none;
}
body .custom {
	display: none;
}
body.page-template-page-custom .custom, body.post-template-page-custom .custom, body.category-faq-custom .custom, body.category-custom .custom, body.category-case-custom .custom {
	display: inherit;
}


@media (min-width: 992px) {
	.col-md-8 {
    	width: 100%;
	}
}

/*Sticky sidebar*/
@media only screen and (min-width: 992px) {
	#secondary {
		position: sticky;
		top: 50px;
	}
}

/* section selector in menu */
/* move to the right */
#mainnav {
    float: unset;
}
#mainnav li.sect, #mainnav li.facebook, #mainnav li.instagram, #mainnav li.google {
	float: right;
}
#mainnav li.facebook, #mainnav li.instagram, #mainnav li.google {
	padding: 0px 3px;
}
#mainnav li.sect, body.page-template-page_front-page #mainnav li.rent {
	padding: 0px 20px;
	margin-right: 20px;
}

/*styling*/
li.sect > a, body.page-template-page_front-page li.rent > a {
	font-size: 18px !important;
	font-style: bold !important;
}
.sect, body.page-template-page_front-page .rent {
	border-radius: 16px;
    background-color: white; 
    text-align: center;
}

/* hide clutter on Woocommerce product pages */
.woocommerce-product-gallery__trigger, .tabs.wc-tabs, .product_meta {
	display: none;
}
a > .wc-block-grid__product-title {
	color: black;
}

/*hide powered by.. in footer*/
div.site-info {
	display: none;
}

/* Fareharbor mods */
/* hide Farharbor Book Now button */
body > a.fh-button-flat-red {
	display: none !important;
}

/* div.embed-calendar-header-small.calendar-large-hide, #ng-app > div > div > div > div > div > div > div.embed-calendar-header-small.calendar-large-hide { */
div#secondary aside div.fareharbor-calendar-wrap div.embed-calendar-header-small, .calendar-large-hide {
	display: none;
}



/* BLOCKQUOTE STYLING */
blockquote.wp-block-quote {
    background-color: inherit;
    color: inherit;
    font-size: inherit;
    font-style: inherit;
    line-height: inherit;
    border-left: none;
   	clear: both;
	padding: 0;
    margin: 0;
    font-size: 17.5px;
}

blockquote.wp-block-quote > p {
	background-color: var(--quote-bg);
	position:relative;
    padding: 10px 5%;
	margin:10px 0;
	color: white;
	border:3px;
    border-radius:16px;
    font-size: 15px;
	font-style: italic;
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
blockquote.wp-block-quote cite {
	padding-left: 10%;
	font-weight: bold;
    z-index: 1;
    position: relative;
    color: black;
}

blockquote.wp-block-quote:before {
   content: "★★★★★";
    color: #f3961c;
    float: right;
    position:relative;
    font-size: 36px;
    text-shadow: 1px 1px 2px #fff;
    line-height: 0px;
    z-index:1;
}

/* creates the larger triangle */
blockquote.wp-block-quote > p:before {
  content:"";
  position:absolute;
  bottom:-30px;
    right: 105px;
    border-width: 0 0 30px 45px;
  border-style:solid;
  border-color: transparent var(--quote-bg);
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller triangle */
blockquote.wp-block-quote > p:after {
  content:"";
  position:absolute;
  bottom:-30px;
    right: 145px;
    border-width: 0 0 30px 5px;
  border-style:solid;
  border-color:transparent #fff;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/*Review-carousel: */
.slider {
  max-width: 300px;
  height: 300px;
  margin: 20px auto;
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute !important;
  width: 100%;
  height: 100%;
}
.slide1 {
    animation:fade 30s infinite;
-webkit-animation:fade 30s infinite;

} 
.slide2 {
    animation:fade2 30s infinite;
-webkit-animation:fade2 30s infinite;
}
.slide3 {
    animation:fade3 30s infinite;
-webkit-animation:fade3 30s infinite;
}

.slide4 {
    animation:fade4 30s infinite;
-webkit-animation:fade4 30s infinite;
}
@keyframes fade
{
  0%   { opacity: 1}
  20%   { opacity:1}
  25% { opacity: 0}
  95% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   { opacity: 0}
  20%  { opacity: 0}
  25% { opacity: 1}
  45% { opacity: 1}
  50% { opacity: 0}
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   { opacity:0}
  45% { opacity: 0}
  50% { opacity: 1}
  70%  { opacity: 1}
  75% { opacity: 0}
  100% { opacity: 0}
}
@keyframes fade4
{
  0%   { opacity:0}
  70% { opacity: 0}
  75% { opacity: 1}
  95%  { opacity: 1}
  100% { opacity: 0}
}
/* carousel END */