/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
.landing{/* gradient for the landing page*/
background: rgb(90,133,172);
background: -moz-linear-gradient(112deg, rgba(90,133,172,1) 0%, rgba(250,251,252,1) 100%);
background: -webkit-linear-gradient(112deg, rgba(90,133,172,1) 0%, rgba(250,251,252,1) 100%);
background: linear-gradient(112deg, rgba(90,133,172,1) 0%, rgba(250,251,252,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5a85ac",endColorstr="#fafbfc",GradientType=1);

	
min-height: calc((var(--vh, 1vh) * 100) - 100px) !important;/* calc( 100vh - 100px ) instead of min-vh-100 to make it full landing image*/
	}
 
.moduleASL {
  xheight: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}
@media (max-width: 294px){ /* instead of min-vh-100 to make it full landing image*/
	#header + .include-header {
	min-height:  calc((var(--vh, 1vh) * 100) - 200px) !important; /* calc( 100vh - 200px ) instead of min-vh-100 to make it full landing image*/
	}
}
@media (min-width: 295px) and (max-width: 345px){ /* instead of min-vh-100 to make it full landing image*/
	#header + .include-header {
	min-height:  calc((var(--vh, 1vh) * 100) - 150px) !important; /* calc( 100vh - 150px ) instead of min-vh-100 to make it full landing image*/
	}
}
@media (min-width: 992px){
#header + .include-header {
	min-height: calc(var(--vh, 1vh) * 100) !important; /* 100vh instead of min-vh-100 to make it full landing image*/
	}
}
@media (max-width: 360px){ /* to make the big welcome message readable in tiny screens */
.slider-caption h2 {
    font-size: calc(100vw /6);
	}
}


#footer a:hover{
	color:#3d85c6;
	}
.dark #copyrights a{/* for email link color in the footer*/
	color: rgba(255,255,255,0.4);
	}
.gray-medium{ /* my chosen medium gray */
	color: rgba(255,255,255,0.4);
	}
.gray-dark{/* my chosen dark gray */
	color:#464646;
	}
.text-outline-gray-dark{ /* four parts of text shadow */
	text-shadow: -1px -1px 0 #e0e0e0, 1px -1px 0 #e0e0e0, -1px 1px 0 #e0e0e0, 1px 1px 0 #e0e0e0 !important;
	}
.text-outline-dark{ /* four parts of text shadow */
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
	}

.anchor-color a:hover{/* color of hovering links to site main color */
	color:#3d85c6 !important;
	}
.breadcrumb{
	top: 40% !important;
	}
.white-color{
	color: white !important;
	}
.caption-smaller{
	line-height: 1.5;
	font-size: 1rem !important;
	font-weight:bolder;
	}
.stablehover {/* for eco certificates carousel homepage*/
	border-top: 1rem solid #fff;
	}
.stablehover:hover{
	border:none;
	border-bottom: 1rem solid #fff;/* to prevent img vibration when hover from bottom */
	}
.hover-myStyle > div > div{/* for hover 3d on HpmePage */
	 margin-bottom:1.7rem; 
	 cursor:pointer;
	}
.hover-myStyle h2{/* to make the title on hover 3d smaller and have outline on home page */
	font-size: 20px;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
	xfont-size: calc(50% + 1vw + 1vh);/* font-size: calc(100% + 1vw + 1vh); */
	}
	
/* Medium devices toggle appears at this breakpoint */
@media (min-width: 768px)  and (max-width: 991px){  
  
  .hover-myStyle h2{
	font-size: 16px;
	xtext-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
	
	}
}
/* large devices toggle appears at this breakpoint */
@media (min-width: 1200px){  
  
  .hover-myStyle h2{
	font-size: 26px;
	xtext-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
	
	}
}
#footer .footer-widgets-wrap{ /* shorter footer padding from 80 to 40 */
    padding: 40px 0;
	}
#footer a.active{
	xborder: 1px solid white !important;
	xborder-radius: 0.4rem;
	}
#copyrights{/* making the copyright shorter */
	padding: 15px 0px;
	}
#copyrights a:hover{
	color:#3d85c6;
	}
#footer h4 {/* to straighten the footer columns */
    margin: 0 0 28px 0;
	}
#page-title span{/* to make the tagline more readable */
	font-size: 1.2rem !important;
	font-weight:400 !important;
	}
.owl-carousel.with-carousel-dots .owl-nav [class*=owl-] { margin-top: -30px; }/* arrows on carousel in homePage*/
.mycolorbullets i { /*color the bullets of the lists*/
	color:#3d85c6;
	}
/* to make a radius corner in img hover start ===================>*/	
.img-hover-card img { /* the img hover corners in HomePage */
	border-radius: 0.4rem;
	}
.img-hover-wrap.show-title .img-hover-card:after {
   border-radius: 0.4rem;
   xopacity: 0.5;
}
.img-hover-wrap:hover .img-hover-card {
    border-radius: 0.4rem;
	xbox-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
/* to make a radius corner in img hover end ===================>*/	
.mycolorbullets .toggle-header{
	color:#3d85c6;
	}
.mycolorbullets .toggle-header:hover{/* for hovering over toggle headers */
	color:inherit;
	}
.topmargin-xs { margin-top: 1rem !important; }
.bottommargin-none{
	margin-bottom:0;
	}
.bottommargin-xs { margin-bottom: 1rem !important; }


.PlaceHolder{/* a common placeholder for the images in the posts*/
	background-color:darkgray;
	width:341px !important;
	height:256px !important;
	line-height: 256px !important;
	text-align:center;
	align-content:center;
	}

/* ==================== Textile Aux. ==================== */
/*===================== Paper and Leather =============== */
.list-items-B-Margin > li{/* a bottom margin for the list items */
	margin-bottom:0.5rem !important;
	}
	
/*===================== ECO Certificates ================ */

.lighten.flip-card-front::after {/* to affect the color of flip card */

    opacity: 0;
    background-color: #000;

}

.lighten.flip-card-front, .lighten.flip-card-back {
    xbackground-size: cover;
    xbackground-position: center;
    x-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    xtransition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    x-o-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    xtransition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    xtransition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1),
	-webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    x-webkit-backface-visibility: hidden;
    xbackface-visibility: hidden;
    xwidth: 100%;
    height: 150px;
    xborder-radius: 6px;
    xcolor: #FFF;
    xfont-size: 1.5rem;
}

.info-source{ /*for the info source */
	 margin-top:-1rem; 
	 font-size:0.8rem; 
	 font-style:italic; 
	}
	
	/*============================ detergents page ===========================*/
.dark-dots .flex-control-nav li a {
    background-color: #7A7A7A;
}
/*================================ contact us page ===========================*/

/*===================== start of google-map css ============================*/
/* extra small and small devices toggle appears at this breakpoint */
#map-1.map-responsive, #map-2.map-responsive, #map-1.map-responsive iframe, #map-2.map-responsive iframe{
    height:350px;
    width:100%;
}
/* Medium devices toggle appears at this breakpoint */
@media (min-width: 768px){  

#map-1.map-responsive, #map-2.map-responsive, #map-1.map-responsive iframe, #map-2.map-responsive iframe{
		 height:26rem !important;
	}
}

/* large devices toggle appears at this breakpoint */
@media (min-width: 992px)  and (max-width: 1199px){  
  
#map-1.map-responsive, #map-2.map-responsive, #map-1.map-responsive iframe, #map-2.map-responsive iframe{
		xheight:100% !important;
	}
.map-responsive .fluid-width-video-wrapper {
	padding-top:0 !important;
	}
}
/* extra large devices toggle appears at this breakpoint */
@media (min-width: 1200px){  

#map-1.map-responsive, #map-2.map-responsive, #map-1.map-responsive iframe, #map-2.map-responsive iframe{
		xheight:100% !important;
	}
#map-1.map-responsive, #map-2.map-responsive, #map-1.map-responsive iframe, #map-2.map-responsive iframe {
	padding-top:0 !important;
	}
}
/* ======================== end of google-map css ======================*/

.li-bottom-margin-sm li {/* for bottom margin in contact numbers */
		margin-bottom:0.5rem;
	}