/* 
Theme Name: Fondafor
Version: 1.0
Author: Adlouni Web Solutions
Author URI: http://www.awebs.ca
Template: twentytwentyone */

:root{
	--accent: #f1a12b;
	--dark-accent: #182333;
	--footer--color-text: #fff;
	--footer--color-link: #fff;
	--footer--color-link-hover: var(--accent);
	/* Font Family */
	--global--font-primary: var(--font-headings, -apple-system, 'Poppins', sans-serif);
	--global--font-secondary: var(--font-base, -apple-system, 'Poppins', sans-serif);
	--form--border-width: 2px;
	
}

body {
	background-color: transparent;
}

@media only screen and (min-width: 822px) {

	:root {
		--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
	}
}
* {
  box-sizing: border-box;
}
::selection {
	background: var(--accent);
}
input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, input[type=search]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=date]:focus, input[type=month]:focus, input[type=week]:focus, input[type=time]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=color]:focus, .site textarea:focus, select:focus, input[type=checkbox]:focus {
	outline: none;
	border: var(--accent) solid 2px;
}
input[type=text], input[type=email] {
	width: 100%;
}
textarea {
	min-height: 100px;
}
a, a:hover, a:active {
	text-decoration: none;
}
a:hover {
	color: var(--accent);
}
a:focus {
	background: none !important;
	color: var(--accent) !important;
	text-decoration: none !important;
}

h2.section-title { text-transform: uppercase; position: relative; margin-bottom: var(--global--spacing-vertical); padding-bottom: var(--global--spacing-vertical); }
h2.section-title:after { content: ""; position: absolute; bottom: 15px; width: 50px; height: 5px; background: var(--accent); left: 50%; transform: translateX(-50%); transition: all .3s; }
h2.section-title:hover:after { width: 85px; }

.site .button:focus, button:focus, input[type=submit]:focus, input[type=reset]:focus, .wp-block-search .wp-block-search__button:focus, .wp-block-button .wp-block-button__link:focus, .wp-block-file a.wp-block-file__button:focus {
	outline: none;
}
.form-control:focus {
	box-shadow: none;
}
.site-main {
	padding-bottom:0;
}

/* logo */
.site-logo {
	filter: invert(1);
}
.home .site-logo {
	filter: invert(0);
}

.site-title {
	font-family: "Stardos Stencil", system-ui;
	color: var(--accent);
	font-size: 30px;
	font-weight: 700;
	text-transform: uppercase;
}
.site-title .black{
	color: #000;
}

.site-title a {
	font-weight: bold;
}

.site-title a:hover,
.site-title a:focus {
	color: var(--accent);
}

/* top banner */
.topbanner {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
}
.topbanner .site-name, .topbanner .phonenumber, .topbanner .hours {
	float: left;
	width: 25%;
	text-align: left;
}
.topbanner .site-name .site-title {
	margin-left: 15px;
}
.topbanner .phonenumber {
	display: none;
}
.topbanner .hours {
	display: none;
}
.topbanner .cto-btn {
	display: none;
}

.menu-button-container {
	padding-top: 0;
}

/* header */
.homehero {
	overflow: hidden;
	height: calc(100vh - 44px);
	width: 100%;
	background-size:cover;
	background-position: center;
	position: relative;
	margin-top: 0;
}

.n2_clear{
	height: calc(100vh - 100px);
	margin-bottom: 0;
}

.n2-ss-slide-active {
	height: calc(100vh - 100px) !important;
}



.site-header {
	padding: 0;
}
.homehero .site-branding {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
}

.homehero .site-branding h2 {
	text-shadow: 1px 1px #000;
	font-weight: bold;
	font-size: 55px;
	color: white;
}

.homehero .site-branding p {
	color: white;
	font-weight: 500;
	font-size: 35px;
	text-shadow: 1px 1px #000;
	display: none;
}

.homehero .site-branding p span {
	color: var(--accent);
	font-size: 35px;
	font-weight: 500;
	text-shadow: 1px 1px #000;
	padding: 0 15px;
}

/* mobile menu */
.primary-navigation-open .menu-button-container, .primary-navigation > .primary-menu-container {
	background-color: var(--dark-accent);
}
.menu-button-container .dropdown-icon.close {
	color: #fff;
}

.primary-navigation {
	background-color: var(--dark-accent);
	width: 100%;
	padding: 0 20px;
	z-index: 1;
}
.primary-navigation li a:link, .primary-navigation li a:visited {
	text-transform: uppercase;
	text-decoration: none !important;
	font-weight: 500;
	color: #fff;
	transition: all .1s;
}
.primary-navigation .current-menu-item {
	background-color: var(--accent);
	
}
.primary-navigation .current-menu-item a {
	color: var(--dark-accent) !important;
}
.primary-navigation li a:hover, .primary-navigation li a:focus {
	color: var(--accent);
	background: none;
}
.primary-navigation li button {
	display: none !important;
}
.primary-navigation .menu-cto {
	background: var(--accent);
}
.primary-navigation .menu-cto a:hover {
	color: #000;
}

.hero-image {
	background-position: bottom; 
	background-size: cover; 
	background-repeat: no-repeat;
	position: relative;
	height: 250px;
	background-attachment: fixed;
}
.inner-page-header {
	position: absolute;
	margin: 0;
	padding: 0 !important;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.inner-page-header .entry-title {
	color: #fff;
	font-weight: 400;
	text-transform: uppercase;
	text-shadow: 2px 2px 2px #000;
}
/* slider */
.n2-active  {
	background: var(--accent) !important;
}

.widget-area a {
	text-decoration: none;
}

/* services */
.services {
	text-align: center;
	margin-bottom: var(--global--spacing-vertical);
	margin-top: var(--global--spacing-vertical);
}
.services h2 {
	margin-bottom: var(--global--spacing-vertical);
	text-transform: uppercase;
}
.service-container {
	width: 50%;
	position: relative;
	float: left;
	padding: 15px;
	text-align: left;
}
.service {
	text-align: center;
	height: 100%;
}
.service h3 {
	font-size: 18px;
	font-weight:500;
}
.service img {
	width: 64px;
	padding-bottom: 15px;
	filter: grayscale(100%);
	opacity: 0.5;
	transition: all .3s;
}
.service:hover img {
	filter: grayscale(0);
	opacity: 1;;
}
.service-cto {
	background-color: var(--accent);
}

.heroconsultation {
	height: 300px;
	text-align: center;
	background-image: url(http://127.0.0.1/starcloset/wp-content/uploads/2021/04/pexels-max-vakhtbovych-6436757-scaled.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom;
	background-attachment: fixed;
	padding: 35px;
	position: relative;
}
.heroconsultation div {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.heroconsultation span {
	display: block;
	text-transform: uppercase;
	margin-bottom: 20px;
	font-weight: bold;
	font-size: 40px;
	background: rgba(0,0,0,0.6);
	padding: 10px 20px;
	color: #fff;
}
.heroconsultation.plain span {
	font-size: 18px;
}
.heroconsultation a {
	display: inline-block;
	text-transform: uppercase;
	background: var(--accent);
	color: #fff;
	text-decoration: none;
	padding: 10px;
}
.heroconsultation.plain a {
	display: inline-block;
	text-transform: uppercase;
	background: var(--accent);
	color: #fff;
	text-decoration: none;
	padding: 10px;
	border: solid 2px #fff;
	transition: all .3s;
}
.heroconsultation.plain a:hover {
	background: #fff;
	color: var(--accent);
}
/* contact form */
.contact-form label, .contact-form input {
	width: 100%;
}


/* why us */
.whyus {
	margin-bottom: var(--global--spacing-vertical);
	background: #eee;
	padding: 25px 0;
	text-align: center;
}
.whyus h2 {
	text-transform: uppercase;
	text-align: center;
}
.whyus h4 {
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 0;
	font-size: 18px;
}
.wufeature {
	width: 50%;
	padding: 0;
	position: relative;
	display: inline-block;
}
.wufeature img {
	filter: grayscale(1);
	transition: all .3s;
	max-width: 128px;
}
.wufeature:hover img {
	filter: grayscale(0);
	transform: rotateY(360deg)
}



.btn-outline {
	text-align: center;
}
.btn-outline a {
	text-decoration: none;
	background: #fff;
	color: #000;
	border: solid 2px var(--accent);
	padding: 10px 15px;
	margin-top: var(--global--spacing-vertical);
	margin-bottom: var(--global--spacing-vertical);
	display: inline-block;
	transition: all .3s;
	text-transform: uppercase;
}
.btn-outline a:hover {
	background: var(--accent);
	color: #fff;
}

/* Gallery */
.gallery h2 {
	text-transform: uppercase;
	text-align: center;
	margin-bottom: var(--global--spacing-vertical);
}
.projects {
	text-align: center;
	margin-bottom: var(--global--spacing-vertical);
}
.gallery a {
	width: 33%;
	height: 135px;
	padding: 5px;
	display:inline-block;
}
.gallery a:hover .magnify {
	opacity: 1
}
.gallery a div {
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.magnify {
	opacity: 0;
	position: relative;
	background: rgba(0,0,0,0.35);
	transition: all .3s;
}
.magnify i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
}

/* Clients */
.clients h2 {
	text-transform: uppercase;
	text-align: center;
	margin-bottom: var(--global--spacing-vertical);
}
.clients {
	text-align: center;
	margin-bottom: var(--global--spacing-vertical);
}

.logo {
	height: 120px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo img{
	max-height: 120px;
	max-width: 100%;
}
.owl-carousel .owl-item img {
	display: inline-block;
	width: auto;
}
.clients .client img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	filter: grayscale(100%);
	opacity: 0.5;
	transition: all .3s;
}
.clients .client img:hover {
	filter: grayscale(0%);
	opacity: 1;
	transition: all .3s;
}

.logo {
	filter: grayscale(1);
	opacity: 0.6;
	transition: all .3s;
}
.logo:hover {
	filter: grayscale(0);
	opacity: 1;
}



/* testimonials */
.testimonials {
	text-align: center;
	padding: 50px;
	background: #eee;
	margin-bottom: 0;
}
.testimonials h2 {
	margin-bottom: var(--global--spacing-vertical);
	text-transform: uppercase;
}
.testimonials .carousel-inner {
	min-height: 150px;
}
.testimonials .control {
	padding: 15px;
	background: #fff;
	margin: 10px;
}
.testimonial {
	position: absolute;
}
.testimonial span {
	display: block;
	font-weight: bold;
}
.testimonial i {
	color: #ccc;
}
/* contact form */
.contactform label, .contactform input, .contactform select {
	width: 100%;
}
.contactform input, .contactform select, .contactform textarea {
	border: solid 2px #ccc;
	outline: none !important;
	transition: all .3s;
}
.contactform input:focus, .contactform select:focus, .contactform textarea:focus {
	border-color: var(--accent);
}
/* map */
.map {
	height: 350px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* contact form */
.cf input[type=text], .cf input[type=email], .cf input[type=tel], .cf select, .cf textarea {
	display: block;
	width: 100%;
}
.cf label {
	width: 100%;
}
.cf input[type=checkbox] {
	display: inline-block;
}
.cf textarea {
	rows: 5;
}
/* Footer */
.footer {
	background-color: #252525;
}
.footer .widget-area {
	margin-top: 0;
}
.footer .widget-title {
	text-transform: uppercase;
	border-left: solid 3px var(--accent);
	padding-left: 10px;
}
.site-footer {
	padding-bottom: 0;
}
.site-footer .site-info {
	border-top: solid 1px #666;
}

.footer-social-block {
	padding-top: 20px;
}
.footer-social-block ul li {
	float: left;
	padding-right: 10px;
}
.footer-social-block ul li a {
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	display: block;
	background: #4e4e4e;
	color: #fff !important;
	transition: all .3s;
	border-radius: 50%;
}
.footer-social-block ul li a:hover {
	background: var(--accent);
	color: #fff !important;
}
.footer-social-block ul li a i {
	font-weight: 400;
}
.footer-widget-contact {
	list-style: none;
	padding: 0;
}
.footer-widget-contact a {
	text-decoration: none;
}
.footer-widget-contact a:hover {
	color: var(--accent);
}
.footer-widget-contact li:not(:last-child) {
	border-bottom: solid 1px #454545;
}
.footer-widget-contact li span {
	display: inline-flex;
	padding-left: 10px;
}
.footer-widget-contact li::before{
	color: var(--accent);
}
.footer-widget-contact .address::before {
	font-family: 'FontAwesome';
	content: "\f041";
	width: 15px;
	display: inline-block;
}
.footer-widget-contact .phone::before {
	font-family: 'FontAwesome';
	content: "\f095";
	width: 15px;
	display: inline-block;
}
.footer-widget-contact .mobile::before {
	font-family: 'FontAwesome';
	content: "\f10b";
	width: 15px;
	display: inline-block;
}
.footer-widget-contact .email::before {
	font-family: 'FontAwesome';
	content: "\f0e0";
	width: 15px;
	display: inline-block;
}
.footer-widget-contact .time::before {
	font-family: 'FontAwesome';
	content: "\f017";
	width: 15px;
	display: inline-block;
}
.footer-navigation-wrapper li .svg-icon:hover {
	fill:var(--footer--color-link-hover);
}
.site-footer .site-info .site-name {
	font-size: 16px;
}
.site-name a {
	text-decoration: none;
}

.awebs-container {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	background: #111;
}
.awebs {
	width: 40px;
	height: 28px;
	overflow: hidden;
	margin: auto;
	transition: all .5s;
}
.awebs:hover {
	width: 120px;
}
.awebs a {
	display: inline-block;
}
.awebs img {
	width: 120px;
	opacity: 0.6;
	transition: all .5s;
	max-width: 120px;
	vertical-align: unset;
}
.awebs img:hover {
	opacity: 1;
}

@media (min-width: 640px){
	/* top banner */
	.topbanner {
		display: flex;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
	}

	.topbanner .site-name, .topbanner .phonenumber, .topbanner .hours {
		float: left;
		width: 25%;
		text-align: left;
	}

	.topbanner .phonenumber {
		display: block;
		text-align: center;
		border-right: solid 1px grey;
		padding-right: 15px;
	}

	.topbanner .hours {
		display: block;
		text-align: center;
		margin-left: 15px;
		margin-right: 15px;
	}

	.topbanner .phonenumber .title, .topbanner .hours .title {
		text-transform: uppercase;
		font-size: 14px;
	}

	.topbanner .phonenumber .info, .topbanner .hours .info {
		text-transform: uppercase;
		font-size: 14px;
		font-weight: 500;
		display: block;
	}

	.topbanner .cto-btn {
		display: block;
		float: left;
		width: 25%;
		text-align: right;
	}

	.topbanner .cto-btn a {
		display: inline-block;
	}
	.homehero {
		margin-top: -25px;
		height: calc(100vh - 100px);
	}
	.homehero .site-branding p {
		color: white;
		font-weight: 500;
		font-size: 35px;
		text-shadow: 1px 1px #000;
		display: inline-block;
	}
	.n2_clear{
		margin-top: -55px;
	}
	
	/* why us */
	.whyus {
		margin-bottom: var(--global--spacing-vertical);
		background: #eee;
		padding: 50px 0;
		text-align: center;
	}
	.whyus h2 {
		text-transform: uppercase;
		text-align: center;
	}
	.whyus h4 {
		text-transform: uppercase;
		font-weight: 500;
		margin-bottom: 25px;
		font-size: 18px;
	}
	.wufeature {
		width: 100%;
		padding: 20px 0;
		position: relative;
	}
	.wufeature img {
		filter: grayscale(1);
		transition: all .3s;
		max-width: 128px;
	}
	.wufeature:hover img {
		filter: grayscale(0);
		transform: rotateY(360deg)
	}
	
	/* gallery */
	.gallery a {
		width: 25%;
		height: 200px;
		padding: 10px;
		display: inline-block;
	}	
}

@media (max-width: 639px){
	button {
		padding: 2px 10px;
		margin: 4px;
	}
}
 
@media (min-width: 768px){
	.exfeature {
		float: left;
		width: 50%;
		padding: 20px;
	}
	/* top banner */
	.topbanner {
		display: flex;
		max-width: var(--responsive--alignwide-width);
		margin: 20px auto 20px auto;
		
	}
	.topbanner a {
		text-decoration: none;
	}
	.topbanner .menu-cto {
		background: var(--accent);
		color: #fff;
		padding: 10px 20px;
		text-transform: uppercase;
		font-weight: 600;
		margin-left: 25px;
	}
	.wufeature {
		float: left;
		width: 50%;
		padding: 20px;
	}
	.heroconsultation.plain div {
		position: relative;
		left: 0;
		top: 0;
		transform: translate(0);
		height: 100%;
	}
	.heroconsultation.plain span {
		margin: 0;
		background: none;
		padding: 0;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		max-width: 50%;
		text-align: left;
		border-right: solid 2px #fff;
		padding-right: 25px;
		font-size: 40px;
	}
	.heroconsultation.plain a {
		position: absolute;
		top: 50%;
		left: 60%;
		transform: translate(-15%,-50%);
	}
}
 
@media (min-width: 1024px){
	.hofeature {
		float: left;
		width: 33.33%;
		padding: 20px;
	}
	.wufeature {
		float: left;
		width: 25%;
		padding: 20px;
	}
	.opfeature {
		float: left;
		width: 50%;
		padding: 20px;
	}
	.opfeature span {
		display: block;
		width: 96px;
		transition: all .3s;
		font-size: 100px;
		font-weight: 900;
		position: absolute;
		top: -15px;
		color: #999;
	}
	.opfeature:hover span {
		color: var(--accent);
	}
	.opfeature h4 {
		position: absolute;
		top: 45px;
		margin-bottom: 0;
		margin-left: 65px;
		transition: all .3s;
	}
	.opfeature:hover h4{
		top: 25px;
	}
	.opfeature p {
		margin-top: 100px;
	}
	.service-container {
		width: 33.33%;
	}


}
 
@media (min-width: 1200px){
	.hero-image {
		height: 250px;
	}
	.opfeature {
		width: 25%;
	}
}