/*
	Theme Name:     Charles Gate
	Author:         Design House
	Template:       design-house
	Version:        1.0.1
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* 

Blue: #9DC1DB; rgba(157, 193, 219, 0.9);
Gold: #b99e4d; 

Dark Grey: #6A6A6A;
Light Grey: #8D8D8D;
*/

/*  
    Global
    ---------------------------------------
*/

.page-content, .entry-content, .entry-summary {
  margin: 0em 0 0;
}


.content-area {
    float: left;
    width: 100%;
}

body {
	overflow-x: hidden;
}

#page {
    width: 100vw;
    overflow-x: hidden;
}

#content {
  background: white;
}


body a {
	transition: all ease-in-out 0.3s;
	text-decoration: none;
}

.desktopOnly {
	display: block;	
}

.mobileOnly {
	display: none;
}

@media only screen and (max-width: 767px) {
	.desktopOnly {
		display: none;	
	}

	.mobileOnly {
		display: block;
	}
}

@media only screen and (max-width: 767px) {
	.wrap {
	  padding: 0px 25px;
	}
}
/*  
    Masthead
    ---------------------------------------

*/

.site-header {
	position: relative !important;
	top: 0px; left: 0;
	width: 100%; 
	height: 90px;
	background-color: black !important;
	z-index: 5;
}
.home .site-header {
	background-color: transparent !important;
	height: 0px;
}
.site-branding {
  	width: 80px;
  	position: absolute;
 	left: 20px;
	top: 20px;
}

.home .site-branding {
	display: none;
}

/* Force Mobile Nav */ 

#desktop-navigation {
    display: none !important;
	right: 40px;
	position: relative;
	top: 45px;
	margin-left: 25px;
	float: right;
}


#desktop-navigation li {
  float: left;
  list-style: none;
}

#desktop-navigation li a {
	font-weight: 400;
	font-size: 16px;
	color: white;
	text-transform: uppercase;
}
#desktop-navigation li a:hover, #desktop-navigation li a:active {
	color: #888686;
}




/* MOBILE NAVIGATION 
------------------------------------------------------
*/


#mobile-navigation {
  display: block !important;
  position: absolute;
  right: 0px;
  top: 30px;
}

#mobile-icon {
    position: absolute;
   	top: 0px;
	right: 20px;
} 

#mobile-icon.open {
   /* position: fixed !important; */
}


#mobile-icon span {
	height: 2px;
	background: white !important;
}


/* 'Mobile' Style Menu 
---------------------------------------
*/


.menuWrap {
    background: rgba(0, 0, 0, 0.8);
    right: 0px;
    padding: 0px;
    height: 100vh;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    display: none;
    opacity: 0;
    min-height: 600px;
    position: fixed;
	overflow: hidden !important;
    width: 0vw;
	top: 0;
	border-left: 2px solid #fff !important;
}

.menuWrap .wrap {
    width: 100%;
    max-width: 1000px;
}


#mobile-menu {
    margin: 0px;
    padding: 0px;
    list-style: none;
}



#mobile-menu li {
    margin-bottom: 0px;
	text-align: right;
}

.menuContainer {
    padding-top: 0px;
    overflow: hidden;
    height: auto !important;
    width: auto !important;
    opacity: 0;
    margin-right: 0px;
	float: right;
}

#mobile-menu .menu-item {
    text-align: right;
}

#mobile-menu li a {
    color: #fff !important;
	font-weight: 400;
	text-transform: uppercase;
}

#mobile-menu li a:hover {
    font-size: 28px;
    color: #ccc !important;
}

.menuProject a {
  font-size: 16px !important;
}
.menuProject a:hover {
  font-size: 17px !important;
}

.menuWrap {
	width: 370px !important;
	height: 100vh !important;
	position: fixed;
	border-left: 0px;
}


.menu ul {
    list-style: none;
}

.menuSocial img {
    width: 50px;
	transition: all linear 0.3s;
}
.menuSocial img:hover {
    width: 70px;
}



/* SMALL SCREEN STYLING 
------------------------------------------------------
*/


@media only screen and (max-width: 799px) {
	.site-branding {
		width: 80px;
		top: 18px;
		left: 18px;
	}
	.site-header {
		position: relative !important;
		top: 0; left: 0;
	}
	#socialHeaderStrip {
		position: relative;
	}
	.headerSlogan {
		display: none;
	}
	.menuWrap {
		width: 100% !important;
	}
	#mobile-menu li a {
		font-size: 23px;
	}
	#mobile-menu li a:hover {
		font-size: 26px;
	}
	.menuWrap .wrap {
	  padding: 20px;
	}
}



/*  
    Rev Slider
    ---------------------------------------
*/


#rev_slider_1_1_forcefullwidth {
  margin-top: -60px !important;
}

.custom .tp-bullet {
  width: 35px !important;
  height: 7px !important;
}
/*  
    Rev Slider, Testimonials
    ---------------------------------------
*/

.testimonialName {
	color: #9DC1DB !important;
	font-size: 0.8em !important;
}

.testimonialLogos {
  display: flex;
  flex-flow: row;
  justify-content: center;
}

.testimonialLogo {
  height: 45px;
  margin: 0 15px 15px;
}




/*  
    Typography
    ---------------------------------------
*/

body {
    font-family: 'PT Sans', sans-serif;
	text-align: center;
}

body p, body li, body a, body a:visited,
.fp-excerpt {
    font-size: 17px;
    color: #8D8D8D;
    font-weight: 400;
    font-family: 'PT Sans', sans-serif;
	line-height: 1.7em;
	letter-spacing: 0.05em;
}

body a {
    cursor: pointer;
}

body a:hover, body a:focus  {
}

p a {
  color: #8D8D8D !important;
}

b, strong {
  font-weight: 400;
  color: #8D8D8D;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h4, h5, .h5, h6, .h6 {
	font-weight: 700;
    font-family: 'PT Sans', sans-serif;
	line-height: 1.4em;
	letter-spacing: 0.05em;
	position: relative;
	margin: 0;
	text-transform: uppercase;
	color: #6A6A6A; /* Dark Grey */
}

.pageTitle {
	display: none;
}

h1, .h1 {
	font-size: 32px;
}

h2, .h2 {
	font-size: 30px;
}
	
h3, .h3 {
	font-size: 22px;
	line-height: 1.75em;
	font-weight: 400;
	margin-top: 30px;
}
h4, .h4 {
  font-size: 15px;
}
h5, .h5 {
	font-size: 14px;
}
h6, .h6 {
	font-size: 13px;
}

.textwidget h5 {
	text-align: center;
	margin: 0;
}

body ul {
  padding: 0;
	margin: 15px;
	text-align: left;
}
.wpb_text_column li {
  list-style: none; /* Remove default bullets */
}

.wpb_text_column ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #44693D !important; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
	font-size: 20px;
}

@media only screen and (max-width: 799px) {
	h1, .h1  {
		font-size: 30px;
	}
	h2, .h2  {
		font-size: 26px;
	}
	h3, .h3 {
		font-size: 24px
	}
	h4, .h4 {
		font-size: 22px
	}
	h5, .h5 {
		font-size: 20px;
		line-height: 40px;
	}
	h6, .h6 {
		font-size: 20px;
		line-height: 35px;
	}
}


/*  
    Visual Composer
    ---------------------------------------
*/

.vc_row {
    padding-top: 50px;
	padding-bottom: 50px;
}
.trans {
	background: transparent;
}

.noPadding, .noPadding .vc_column-inner {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	padding-left: 0px !important;
	padding-right: 0px !important;	
}

.smallPadding {
	padding-top: 25px;
	padding-bottom: 50px !important;
}
.projectPadding {
  padding-top: 25px;
  padding-bottom: 0px !important;
}

.largePadding {
	padding-top: 130px;
	padding-bottom: 30px !important;
}

.columnPadded {
	padding: 70px !important;
}
.blackOverlay {
	background: rgba(0, 0, 0, 0.4) !important;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

@media only screen and (max-width: 799px) {
	.columnPadded {
		padding-left: 50px !important;
		padding-right: 50px !important;
	}
	.largePadding {
	  padding-top: 20px;
	  padding-bottom: 0px;
	}
	.absoluteImage {
	  width: 190px;
	  position: relative;
	  right: 0px;
	  bottom: 0px;
	  left: -15px;
	  top: -30px;
	}
}

@media only screen and (max-width: 690px) {
	.columnPadded {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

.colourRow, .projectsRow {
	background: url('https://charles-gate.com/wp-content/uploads/2023/02/Background-2.jpg');
	background-size: 100% auto;
	background-repeat: repeat-y;
}
.colourRow p, .colourRow a {
	color: #8D8D8D;
}
.colourRow .a:hover {
	color: #000;
}

.wpb_single_image .vc_figure, .wpb_single_image .vc_single_image-wrapper, .wpb_single_image img {
	width: 100%;
}

.button {
  width: 165px;
  background: transparent;
  display: block;
  text-align: center;
  padding: 5px;
  color: #272727 !important;
  text-transform: uppercase;
  float: none;
  margin: 0 auto;
    margin-bottom: 0px;
  border: 1px solid #272727;
  border-radius: 13px;
  font-size: 0.8em;
	opacity:0.6;
	transition: all linear 0.3s;
}
.button:hover {
  opacity: 1;
}

@media only screen and (max-width: 767px) {
	.swapOnMobile {
		display: flex !important;
		flex-direction: column-reverse;
	}
	.blackOverlay {
	  min-height: 400px !important;
	  position: relative;
	  height: 100% !important;
	  margin-bottom: -35px;
	}
}



/*  
    Ultimate Posts Grid
    ---------------------------------------
*/


#wpupg-grid-projects-filter-1 .wpupg-filter-item {
  background-color: transparent !important;
  font-size: 18px !important;
  text-transform: uppercase;
	transition: all linear 0.3s;
}

#wpupg-grid-projects .wpupg-block-text-normal {
	transition: all linear 0.3s;
  font-weight: 400;
  font-style: normal;
  text-transform: none !important;
  position: absolute !important;
  height: 100% !important;
  z-index: 1 !important;
  top: 0 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  width: 100% !important;
  text-align: center !important;
	text-transform: uppercase !important;
	color: white !important;
	 display: flex !important;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	padding: 0 5px;
	line-height: 25px;
}

#wpupg-grid-projects .wpupg-block-text-normal:hover {
	background: rgba(0, 0, 0, 0) !important;	
}


/*  
    Single Post (Services)
    ---------------------------------------
*/


.single-services .postBanner {
	height: 400px;
	position: relative;
	width: 100%;
	float: left;
	margin-top: -120px;
	background-size: cover !important;
	background-position: center right !important;
}

.postBannerOverlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 100%);
}

.postBannerWrap {
	max-width: 1100px;
	float: none;
	position: relative;
	width: 100%;
	height: 400px;
	margin: 0 auto;
}
.postBannerTitle {
	position: absolute;
	width: 300px;
	bottom: 50px;
	left: 20px;
	z-index: 10;
}
.postFeatured {
	float: left;
	width: calc(25% - 50px);
}
.postContent {
	float: right;
	width: 75%;
	padding: 10px 50px;
	border-left: 2px dotted #b99e4d;
	text-align: left;
	margin-bottom: 50px;
}


#single-post-container {
  padding: 40px 0px;
}

.post-wrap {
    width: 100%;
    float: left;
}

.sidebar-wrap {
    width: calc(40% - 80px);
    margin-left: 80px;
    float: left;
}

.sidebar-wrap .fp-row {
    margin: 0px !important;
}

.sidebar-wrap .fp-col {
    width: 100% !important;
    margin: 0px 0px 40px !important;
}

.sidebar-wrap .widgettitle {
    display: none;
}

@media only screen and (max-width: 797px) {
    .post-wrap {
        width: 100%;
        margin: 0px 0px 40px;
    }

    .sidebar-wrap {
        width: 100%;
        margin: 0px;
        display: none;
    }
}


/*  
    Ninja Forms
    ---------------------------------------
*/
#nf-form-1-cont {
  margin-top: 20px;
}

.nf-form-content {
	padding: 0px !important;
}

.nf-form-title, .nf-before-form-content, .nf-field-label {
    display: none;
}

input[type="button"] {
    cursor: pointer;
	border-radius: 0 !important;
	background: #fff !important;
	border: 0px solid #fff !important;
	color: #6A6A6A !important;
	padding: 15px !important;
	float: left;
	text-transform: uppercase;
}
input[type="button"]:hover {
	color: #6A6A6A !important;
	background: #fff !important;
	border: 0px solid #fff !important;
}

.nf-field-element::after {
    display: none;
}

.nf-element {
    border: 0px solid #fff  !important;
    font-size: 16px;
    font-weight: 400;
    font-family: 'PT Sans', sans-serif;
    border-radius: 0px !important;
	background: #fff !important;
	padding: 10px 15px !important;
}

.nf-field-container {
    margin-bottom: 15px !important;
}

.nf-error-msg {
    font-size: 12px;
    font-weight: 400;
    font-family: 'PT Sans', sans-serif;
	color: #000 !important;
}

.ninja-forms-field, .ninja-forms-field::placeholder {
	color: #6A6A6A !important;
  font-size: 16px !important;
  opacity: 1 !important;
}

.nf-field-label label, .nf-field-label a {
  font-weight: 400 !important;
  font-size: 12px !important;
  text-align: justify;
	color: #6A6A6A;
}
.nf-field-label a {
	color: #9DC1DB !important;
}

/*  
    Colophon
    ---------------------------------------
*/


.footerTitle {
	width: 100%;
	margin: 50px 0;
	color: #8D8D8D;
}
.footerTitle h2 {
	margin-bottom: 15px;
}


#colophon {
    margin-top: 60px !important;
    padding-bottom: 0px !important;
	background: url('/wp-content/uploads/2023/02/Background-2.jpg');
	background-size: 100% auto;
	border-top: 0px;
}

.instagramIcon {
	width: 50px;
	height: auto;
	float: none;
	margin: 25px auto 10px;
	opacity: 1;
}.instagramIcon:hover {
	opacity: 0.75;
}

.site-info .wrap {
	padding: 0px 0px;
	border-top: 0px;
	font-size: 0.9em;
}

.threeCol {
	width: 63.666%;
	margin-right: 3%;	
	float: left;
}
.threeCol.last {
	width: 33.33%;
}
.threeCol.last p {
	text-align: center;
}
.threeCol.last img {
  	width: 50%;
	margin-left: 23%;
	margin-top: 50px;
}

.footer-menu {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#colophon a, #colophon p {
    color: #6A6A6A;
}

.footer-content {
  width: 100%;
	text-align: left;
}

.footer-content .site-branding {
	float: left;
	left: 0px;
	margin-top: 50px;
	top: 0;
	z-index: 0;
}

.footer-content p, .footer-content a  {
  width: 100%;
  text-align: center;
	float: left;
	color: #8D8D8D !important;
	font-weight: 400;
}



.copyright {
    float: left;
	text-align: left;
}
.middleLink {
	float: none;
	text-align: center;
}

.website-by {
    float: right;
	text-align: right;
}
.site-info {
    padding: 8px 0 0;
    border-top: 0px;
	background: #fff;
	width: 100%;
	margin-top: 50px;
	font-size: 1em;
	color: #6A6A6A;
	font-weight: 400;
}

.site-info a {
    color: #FFF !important;
	text-align: left;
	width: 100%;
}

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

.site-info p, .site-info a {
    font-size: 15px !important;
}
.footerMenu li {
  float: left;
  list-style: none;
}
.footerMenu li a {
  padding: 0 30px 0 0;
	margin: 0px !important;
}

@media only screen and (max-width: 950px) {
    .copyright, .website-by, .middleLink {
        width: 100%;
        float: left;
        text-align: center;
    }

    .copyright {
        margin-bottom: 10px;
    }

    .site-info {
        margin-top: 0px;
    }
}

@media only screen and (max-width: 600px) {
    .threeCol, .threeCol.last {
        width: 100%;
        text-align: center;
    }
	.threeCol.last img {
	  width: 50%;
	  margin-left: 0%;
	  margin-top: 0px;
	}
}

@media only screen and (max-width: 767px) {
	#colophon {
		margin-top: 70px !important;
	}
}