/*;
 Theme Name:   Ephrem Child Theme
 Theme URI:    https://ephrem.agency
 Description:  WP Ephrem Child theme
 Author:       ephrem@ephreminteractive.com
 Author URI:   https://ephrem.agency
 Template:     wp-ephrem-theme
 Version:      4.3.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Tags:         responsive-layout, accessibility-ready
 Text Domain:  ephrem
*/

:root {
	--clm-primary-color: #61783f ;
	--clm-primary-light-color : #c7b7aa ;
	--clm-primary-bgr-button: #79553b ; 
	--clm-primary-hover-button: #61442f ;
	
	--primary-action-color : #32543e ;
	
	--clm-accent-dark : #1d2419 ;
	--499:#79553b ;
	
    --ldg-bnb-background: #ffffff;
    --ldg-bnb-border-radius: 0.42em;
    --ldg-bnb-box-shadow: 0px 24px 54px 0px rgba(0, 0, 0, 0.1);
    --ldg-bnb-padding: 14px;
    --ldg-bnb-input-background: #ffffff;
    --ldg-bnb-button-border-radius: 0.42em;

    --ldg-bnb-color-primary: #79553b;
    --ldg-bnb-color-primary-lighter:#bcaa9d;
    --ldg-bnb-color-primary-darker: #3d2b1e;
    --ldg-bnb-color-primary-contrast: #f7f7f7;
    --ldg-component-calendar-cell-selection-bg-color: #79553b;
    --ldg-component-calendar-cell-selection-color: #f7f7f7;
    --ldg-component-calendar-cell-selected-bg-color: #bcaa9d;
    --ldg-component-calendar-cell-selected-color: #f7f7f7;
    --ldg-bnb-font-family: inherit;
  }
  #lodgify-book-now-box {    
    width: 100%;
  }

@import url('https://fonts.googleapis.com/css2?family=Cabin+Condensed:wght@400;500;600;700&family=Maven+Pro:wght@400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');

/*
.maven-pro-<uniquifier> {
  font-family: "Maven Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.cabin-condensed-regular {
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.cabin-condensed-medium {
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.cabin-condensed-semibold {
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.cabin-condensed-bold {
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.playfair-<uniquifier> {
  font-family: "Playfair", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
*/

/* should be move to parent theme */
@media (min-width: 320px) and (max-width: 480px) {
	
	body {   height:100% ; }

}

@media (min-width: 320px) and (max-width: 480px) {
	
	body {   height:100% ; }
}
html {
  font-size: 16px; /* Base pour les rem */
}

body {
  font-family: "Cabin Condensed", sans-serif;
}

body, main {
	transition: all 1s ease-in;
}

a {
	color: var(--clm-primary-light-color) ;
    font-weight: normal;
}

a:hover {
	color: var(--clm-primary-bgr-button) ;
    font-weight: normal;
}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
/*     color:#362C1F ; */
}

h2 {
	color: var(--clm-primary-hover-button) ;
	font-family: "Playfair", serif;
	font-size: 2.2em ;
	font-weight: bold ;
}

h3 {
	font-family: "Playfair", serif;
  font-optical-sizing: auto;
  font-weight: bold ;
  color : var(--clm-accent-dark) ;
}

p, li {
  	font-family: "Cabin Condensed", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: large ;
}

b , strong {
	color: var(--clm-primary-color);
}

#preload {
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

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

.underline{
  position: relative;
}

.underline::before{
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: #5c7689;
  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) and (pointer: fine) {
  .underline:hover::before{
    left: 0;
    right: auto;
    width: 100%;
  }
}

.readmore { 
	margin: 40px ;
  border: 2px solid #B85D36 ;
  background-color: transparent;
  color: #B85D36;
  font-weight: bold ;
  width: 120px;
  height: 120px;
  border-radius: 100%;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  transition: all 500ms;
  background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #B85D36 50%, #B85D36 100%);
  background-repeat: no-repeat;
  background-position: 0 0 ;
  background-size: 120px 240px;
  padding: 2% ;
 }
 
.readmore:hover {
    color: white ;
    background-position: 0 -120px ;
   }

.link {
	color: #B85D36;
	cursor: pointer;
	font-weight: 400;
	text-decoration: none;
	font-family: 'Bree Serif', serif;
	font-size: 1.4em ;
}

.link-lg {
	font-size: 1.4em ;
}

.link--arrowed {
	display: inline-block;
	height: 2rem;
	line-height: 2rem;
}

.link--arrowed .arrow-icon {
		position: relative;
		top: -1px;
		-webkit-transition: -webkit-transform 0.3s ease;
		transition: -webkit-transform 0.3s ease;
		transition: transform 0.3s ease;
		transition: transform 0.3s ease, -webkit-transform 0.3s ease;
		vertical-align: middle;
	}

.link--arrowed .arrow-icon--circle {
		transition: stroke-dashoffset 0.3s ease;
		stroke-dasharray: 95;
		stroke-dashoffset: 95;
		
	}

.link--arrowed:hover .arrow-icon {
			transform: translate3d(5px, 0, 0);
			stroke: #23527c;
		}

.link--arrowed:hover  .arrow-icon--circle ,
.link--arrowed:hover  .arrow-icon--arrow {
			stroke-dashoffset: 0;
			stroke: #23527c;
		}

/*********************************************************************
*							   COLORS								 *
**********************************************************************/


/**********************************************************************
 *							Navigations							  	  *
 *********************************************************************/

/* ovverride bootstrap */
.bg-dark {
  background-color: #fcfaf7 !important;
}

 .navbar-nav > li > .dropdown-menu  {
     width: 320px ;
     background-color: #fcfaf7 !important;
     border: none ;
}

.affix ,
.affix-top {
    top: 0;
    width: 100%;
    z-index: 9 !important;
}


.slick-prev:before, .slick-next:before {
	color: var(--clm-primary-color) ;
	}
	

@media (min-width: 320px) and (max-width: 480px) {
		
	
}

@media only screen and (min-width: 768px) and (max-width : 1024px) {
	.navbar-nav > li {
	    font-size: 1em ;
	}

}

/**********************************************************************
 *								Titles								  *
 *********************************************************************/


/************************************************** 
					BUTTONS 
***************************************************/

.btn {
	border-radius:4px;
}

.btn-default,
.btn-default:focus, .btn-default:active, .btn-default.active,
.btn-default:active:focus  {
  color: white ;
  background-color: var(--clm-primary-bgr-button);
  border-color: var(--clm-primary-bgr-button) ;
}

.btn-default:hover  {
  background-color: var(--clm-primary-hover-button);
   border-color: var(--clm-primary-bgr-button) ;
   color: #fff;
}

/*
.btn-primary,
.btn-primary:focus, .btn-primary:active, .btn-primary.active ,
.btn-primary:active:focus ,
.btn-cta,
.btn-cta:focus, .btn-cta:active, .btn-cta.active,
.btn-cta:active:focus {
	color: #fff ;
	background:#B85D36 ;
	border-color: #B85D36;
	font-weight: bold ;
}

.btn-primary:hover,
.btn-success:hover,
.btn-cta:hover {
color: #fff;
background-color: #584036 ;
border-color: #584036 ;
}

.btn-info,
.btn-info:focus, .btn-info:active, .btn-info.active,
.btn-info:active:focus {
color: #362C1F ;
background:#EFF2EB;
border-color: #EFF2EB;
font-size: 1em ;
}

.btn-info:hover {
color: #362C1F;
background: #97BAC2 ;
border-color: #97BAC2 ;
}

.btn-success,
.btn-success:focus, .btn-success:active, .btn-success.active ,
.btn-success:active:focus {
	border: solid 1px ;
    color: #f3f0e9;
    background-color: #442f0f;
	border-color:  #323232 ;
}
*/



@media (max-width: 320px)
{
	.btn {
/* 		font-size: 14px; */
	}
	
}

/* iphone 4S retina portrait, 3.5inch */
@media only screen and (-webkit-min-device-pixel-ratio : 2) and (device-aspect-ratio: 2/3) and (orientation : portrait) {	

}

/**********************************************************************
 *							Homepage Hero							  *
 *********************************************************************/
 
 
.hsContent h1  {
    color: white;
    font-size: 3rem;
    font-family: "Maven Pro", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
}
.hsContent p {
    color: white;
    font-size: 1.6rem;
}
 
/*
.homepagehero	h1 {
	font-family: 'Roboto Slab', serif;
	font-weight: 500 ;
	margin: 1.4em auto;
	font-size: 3em ;
}

.wp-custom-header img {
    object-fit: cover;
    width: 100%;
}
*/


/**********************************************************************
 *							Homepage							  *
 *********************************************************************/
 


/**********************************************************************
 *							Search from							  	  *
 *********************************************************************/
 
 
/**********************************************************************
 *							Locations								  *
 *********************************************************************/
 
 .featured-wrapper {
	 width: 92% !important ;
 }
 
 .rental-featured-image {
	 margin :0.56em ;
 }
 .gallery_images_container {
    margin: 1.56em;
}

.rental-featured-image img ,
 .gallery_images_container img {
	 border-radius: 8px ;
 }
 .starting-price {
	 color: var(--primary-action-color) ;
	 margin: 0.56em 0;
    font-size: 1.85em;
 }
 
.rental-fliters {
	padding:  4px 10px ;
	margin:  0 0.56em 0.56em 0 ;
	border: 1px solid var(--clm-primary-color) ;
	border-radius: 8px;
	display: inline-flex ;
}

div.view-gallery {
    width: 98%;
    text-align: right ;
}

#map {
	height:500px ;
	width: 100% ;
	border-radius: 8px ;
}

@media only screen and (max-width : 992px) {
	 .gallery_images_container {
	 	width: 30% ;
	}
}
/**********************************************************************
 *								Forms								  *
 *********************************************************************/

/**********************************************************************
 *								PAGE								  *
 *********************************************************************/


#page-header {
    text-align: center;
    padding: 0;
    height: 50vw ;
    margin-bottom: 30px ;
}

.single-header {
    width: 100%;
    padding-bottom: 9px;
    border-bottom: none ;
    color:#fff ;
    text-align: left ;
    background-repeat: no-repeat ;
    background-size: cover ;
}

@media only screen and (max-width : 992px) {
	 #page-header {
		 height: 100vh ;
		}
}
/**********************************************************************
 *							Articles							  	  *
 *********************************************************************/
 
 
 
/**********************************************************************
 *							Shortcode								  *
 *********************************************************************/
 
  .featured-image  {
	 margin-bottom: 1.56em ;
 }
 
 .featured-image img {
	 border-radius: 8px ;
 }

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

/****************************************************************************
*							Slick 											*
****************************************************************************/


.slick-list {
    padding-left : 1.25%;
}

.slick-prev:before, .slick-next:before {
	color: #324544 ;
	font-size: 30px;
}

.slick-slide img {
    margin: 0 ;
}

/****************************************************************************
*						LightBox Modal 										*
****************************************************************************/
.lightbox {
	cursor:pointer;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #000;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.modal span.close {
  color: white !important;
  position: absolute;
  top: 60px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  opacity: .6 !important ;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
  width: 100% ;
}

/* Next & previous buttons */
.slide_prev,
.slide_next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  background-color: rgba(0, 0, 0, 0.8);
}

/* Position the "next button" to the right */
.slide_next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.slide_prev:hover,
.slide_next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}





/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {


}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}