@charset "UTF-8";
/*
Theme Name: T&C Venues & Events
Theme URI: 
Author: Red Spot Web Design
Author URI: https://www.redspotdesign.com/
Description: A theme for WordPress 5.
Requires at least: WordPress 4.9.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wp5default
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

T&C Venues & Events is based on Underscores https://underscores.me/, (C) 2012-2018 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


/*###################################
# General Styles
###################################*/
html {font-size: 16px; /* 1em */ overflow: auto; line-height: 1.15; -webkit-text-size-adjust: 100%;}
body {margin: 0 auto; width: 100%; overflow: hidden;}
a, a:visited {color: inherit; text-decoration: none; -webkit-transition: all .5s ease; text-decoration: none !important;}
a, img {-webkit-transition: all ease 0.5s; -o-transition: all ease 0.5s; transition: all ease 0.5s;}
a:focus {outline: none!important;}
input:not([type="checkbox"]):not([type="radio"]), select {height: 42px;}
h1, h2, h3, h4, h5, h6, p, li, ul, ol {margin: 0;}
.simple-serenity {font-family: 'Simple Serenity', sans-serif !important; font-size: 100px; font-weight: 400; line-height: 1.1em; display: inline-block; vertical-align: middle; margin-top: 30px;}
.simple-serenity-offtrack {line-height: inherit !important; margin-top: 15px;}
.simple-serenity-off-small {line-height: inherit !important; margin-top: 20px;}
.simple-serenity-off-bottom {line-height: inherit !important; margin-top: 0; margin-bottom: -30px;}

@keyframes fade_in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/*###################################
## Layouts
###################################*/

/*###################################
## Header
###################################*/
#global-header .elementor-divider {transform: rotate(90deg);}

/*###################################
## Banner
###################################*/
.inner-banner h1 .first-word {font-family: 'Cardo', sans-serif; font-size: 30px; display: block; line-height: 1em; letter-spacing: 5px; text-transform: uppercase; margin-bottom: -10px;}

/*###################################
## Content
###################################*/
#mansion-salon .container-wrapper .on-hover {display: none; opacity: 0;}
#mansion-salon .container-wrapper:hover .on-hover {display: flex; animation: fade_in 1s forwards;}
#mansion-salon .container-wrapper:hover {cursor: pointer;}
#mansion-salon .container-wrapper .simple-serenity {font-size: 150px; display: block; margin: 0;}
#venue .bordered-container, #find-us .bordered-container {position: relative;}
#venue .bordered-container:before, #venue .bordered-container:after {content: ""; position: absolute; inset: 0; z-index: 5;}
#venue .bordered-container:before {background: linear-gradient(to left, #FFF6F7 83%, transparent 17%) right 10px top 10px / calc(100% - 20px) 2px no-repeat, linear-gradient(to bottom, #FFF6F7 53%, transparent 47%) right 10px top 10px / 2px calc(100% - 20px) no-repeat;}
#venue .bordered-container:after {background: linear-gradient(to right, #FFF6F7 83%, transparent 17%) left 10px bottom 10px / calc(100% - 20px) 2px no-repeat, linear-gradient(to top, #FFF6F7 53%, transparent 47%) left 10px bottom 10px / 2px calc(100% - 20px) no-repeat;}
#venue .unique-header h2 .simple-serenity {font-size: 150px; line-height: 0;}
#find-us .bordered-container:before {content: ""; position: absolute; background: linear-gradient(to right, rgba(170,156,117,0.3) 100%, transparent 0%) left 0 bottom 0 / calc(100% - 20px) 2px no-repeat, linear-gradient(to top, rgba(170,156,117,0.3) 72%, transparent 28%) left 0 bottom 0 / 2px calc(100% - 20px) no-repeat;}
#picture-perfect .owl-nav button {display: none !important;}
#picture-perfect .carousel-btn-previous img, #picture-perfect .carousel-btn-next img {cursor: pointer;}
#picture-perfect .owl-item .ue-item a {pointer-events: none !important;}

/*###################################
## Footer
###################################*/

/*###################################
## Wedding Gallery
###################################*/
#wedding-gallery .album-wrapper .button {display: none; opacity: 0;}
#wedding-gallery .album-wrapper:hover .button {display: block; animation: fade_in 1s forwards;}
#wedding-gallery .album-wrapper:hover {cursor: pointer;}

/*###################################
## Our Venue
###################################*/
#our-venue .bordered-container {position: relative;}
#our-venue .bordered-container:before, #our-venue .bordered-container:after {content: ""; position: absolute; inset: 0; z-index: 5;}
#our-venue .bordered-container:before {background: linear-gradient(to left, rgba(170, 156, 117, 0.3) 70%, transparent 30%) right 10px top 10px / calc(100% - 20px) 2px no-repeat, linear-gradient(to bottom, rgba(170, 156, 117, 0.3) 45%, transparent 35%) right 10px top 10px / 2px calc(100% - 20px) no-repeat;}
#our-venue .bordered-container:after {background: linear-gradient(to right, rgba(170, 156, 117, 0.3) 70%, transparent 30%) left 10px bottom 10px / calc(100% - 20px) 2px no-repeat, linear-gradient(to top, rgba(170, 156, 117, 0.3) 45%, transparent 35%) left 10px bottom 10px / 2px calc(100% - 20px) no-repeat;}

/*###################################
# Contact Us
###################################*/
#contact-us .inquiry .elementor-form input {height: 54px;}
#contact-us .inquiry .elementor-form input::placeholder, #contact-us .inquiry .elementor-form textarea::placeholder {opacity: 0;}
#contact-us .inquiry .elementor-form .elementor-field-type-html {margin-top: -15px;}
#contact-us .inquiry .elementor-form .elementor-field-type-html p {font-size: 13px; color: #040000; font-style: italic;}
#contact-us .find-us .bordered-container:before {content: ""; position: absolute; background: linear-gradient(to right, rgba(170,156,117,0.3) 100%, transparent 0%) left 0 bottom 0 / calc(100% - 20px) 2px no-repeat, linear-gradient(to top, rgba(170,156,117,0.3) 72%, transparent 28%) left 0 bottom 0 / 2px calc(100% - 20px) no-repeat;}

/*###################################
# The Mansion
###################################*/
#the-mansion .bordered-container, #the-mansion .key-features .wrapper, #the-mansion .dates .border-container {position: relative;}
#the-mansion .bordered-container:before, #the-mansion .bordered-container:after {content: ""; position: absolute; inset: 0; z-index: 5;}
#the-mansion .bordered-container:before {background: linear-gradient(to left, #FFF6F7 83%, transparent 17%) right 10px top 10px / calc(100% - 20px) 2px no-repeat, linear-gradient(to bottom, #FFF6F7 53%, transparent 47%) right 10px top 10px / 2px calc(100% - 20px) no-repeat;}
#the-mansion .bordered-container:after {background: linear-gradient(to right, #FFF6F7 83%, transparent 17%) left 10px bottom 10px / calc(100% - 20px) 2px no-repeat, linear-gradient(to top, #FFF6F7 53%, transparent 47%) left 10px bottom 10px / 2px calc(100% - 20px) no-repeat; z-index: 10;}
#the-mansion .key-features .wrapper:before, #the-mansion .key-features .wrapper:after {content: ""; position: absolute; inset: 0; z-index: 5;}
#the-mansion .key-features .wrapper:before {background: linear-gradient(to left, rgba(170, 156, 117, 0.3) 34%, transparent 10%) right 20px top 20px / calc(100% - 40px) 2px no-repeat, linear-gradient(to bottom, rgba(170, 156, 117, 0.3) 47%, transparent 10%) right 20px top 20px / 2px calc(100% - 40px) no-repeat;}
#the-mansion .key-features .wrapper:after {background: linear-gradient(to right, rgba(170, 156, 117, 0.3) 34%, transparent 10%) left 20px bottom 20px / calc(100% - 40px) 2px no-repeat, linear-gradient(to top, rgba(170, 156, 117, 0.3) 47%, transparent 10%) left 20px bottom 20px / 2px calc(100% - 40px) no-repeat; z-index: 10;}
#the-mansion .owl-nav button {display: none !important;}
#the-mansion .carousel-btn-previous img, #the-mansion .carousel-btn-next img {cursor: pointer;}
#the-mansion .owl-item .ue-item a {pointer-events: none !important;}
#the-mansion .dates .border-container:before, #the-mansion .dates .border-container:after {content: ""; position: absolute; inset: 0; z-index: 5;}
#the-mansion .dates .border-container:before {background: linear-gradient(to left, rgba(170, 156, 117, 0.3) 38.5%, transparent 10%) right 10px top 10px / calc(100% - 20px) 2px no-repeat, linear-gradient(to bottom, rgba(170, 156, 117, 0.3) 63%, transparent 10%) right 10px top 10px / 2px calc(100% - 20px) no-repeat;}
#the-mansion .dates .border-container:after {background: linear-gradient(to right, rgba(170, 156, 117, 0.3) 38.5%, transparent 10%) left 10px bottom 10px / calc(100% - 20px) 2px no-repeat, linear-gradient(to top, rgba(170, 156, 117, 0.3) 63%, transparent 10%) left 10px bottom 10px / 2px calc(100% - 20px) no-repeat; z-index: 10;}

/*###################################
# Salon 11
###################################*/
.page-id-177 .inner-banner h1 .first-word {all: inherit !important; display: inline-block !important;}
#salon-11 .atmosphere .bordered-container, #salon-11 .key-features .wrapper, #salon-11 .dates .border-container {position: relative;}
#salon-11 .atmosphere .bordered-container:before, #salon-11 .atmosphere .bordered-container:after {content: ""; position: absolute; inset: 0; z-index: 15;}
#salon-11 .atmosphere .bordered-container:before {background: linear-gradient(to left, #FFF6F7 83%, transparent 17%) right 10px top 10px / calc(100% - 20px) 2px no-repeat, linear-gradient(to bottom, #FFF6F7 53%, transparent 47%) right 10px top 10px / 2px calc(100% - 20px) no-repeat;}
#salon-11 .atmosphere .bordered-container:after {background: linear-gradient(to right, #FFF6F7 83%, transparent 17%) left 10px bottom 10px / calc(100% - 20px) 2px no-repeat, linear-gradient(to top, #FFF6F7 53%, transparent 47%) left 10px bottom 10px / 2px calc(100% - 20px) no-repeat; z-index: 10;}
#salon-11 .key-features .wrapper:before, #salon-11 .key-features .wrapper:after {content: ""; position: absolute; inset: 0; z-index: 5;}
#salon-11 .key-features .wrapper:before {background: linear-gradient(to left, rgba(170, 156, 117, 0.3) 34%, transparent 10%) right 20px top 20px / calc(100% - 40px) 2px no-repeat, linear-gradient(to bottom, rgba(170, 156, 117, 0.3) 47%, transparent 10%) right 20px top 20px / 2px calc(100% - 40px) no-repeat;}
#salon-11 .key-features .wrapper:after {background: linear-gradient(to right, rgba(170, 156, 117, 0.3) 34%, transparent 10%) left 20px bottom 20px / calc(100% - 40px) 2px no-repeat, linear-gradient(to top, rgba(170, 156, 117, 0.3) 47%, transparent 10%) left 20px bottom 20px / 2px calc(100% - 40px) no-repeat; z-index: 10;}
#salon-11 .owl-nav button {display: none !important;}
#salon-11 .carousel-btn-previous img, #salon-11 .carousel-btn-next img {cursor: pointer;}
#salon-11 .owl-item .ue-item a {pointer-events: none !important;}
#salon-11 .dates .border-container:before, #salon-11 .dates .border-container:after {content: ""; position: absolute; inset: 0; z-index: 5;}
#salon-11 .dates .border-container:before {background: linear-gradient(to left, rgba(170, 156, 117, 0.3) 38.5%, transparent 10%) right 10px top 10px / calc(100% - 20px) 2px no-repeat, linear-gradient(to bottom, rgba(170, 156, 117, 0.3) 63%, transparent 10%) right 10px top 10px / 2px calc(100% - 20px) no-repeat;}
#salon-11 .dates .border-container:after {background: linear-gradient(to right, rgba(170, 156, 117, 0.3) 38.5%, transparent 10%) left 10px bottom 10px / calc(100% - 20px) 2px no-repeat, linear-gradient(to top, rgba(170, 156, 117, 0.3) 63%, transparent 10%) left 10px bottom 10px / 2px calc(100% - 20px) no-repeat; z-index: 10;}

/*###################################
# Pricing Portfolio
###################################*/
.inquiry-full-container .elementor-form input {height: 54px;}
.inquiry-full-container .elementor-form input::placeholder, .inquiry-full-container .elementor-form textarea::placeholder {opacity: 0;}
.inquiry-full-container .elementor-form .elementor-field-type-html {margin-top: -15px;}
.inquiry-full-container .elementor-form .elementor-field-type-html p {font-size: 13px; color: #040000; font-style: italic;}

/*###################################
## Blog Archive
###################################*/
.blog-loop-wrapper .elementor-widget-theme-post-featured-image a {display: block !important;}

/*###################################
## Blog Single
###################################*/
.blog-single-wrapper .sidebar .elementor-post__title a {position: relative; padding-left: 20px; display: block;}
.blog-single-wrapper .sidebar .elementor-post__title a:before {content: ""; background: #AA9C75; width: 8px; height: 8px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.blog-single-wrapper .elementor-widget-theme-post-content :is(h2,h3,h4,h5,h6) {font-family: 'Cardo', sans-serif; margin-bottom: 10px;}
.blog-single-wrapper .elementor-widget-theme-post-content :is(ul, ol):has(+ :is(h1, h2, h3, h4, h5, h6)) {margin-bottom: 30px;}
.blog-single-wrapper .elementor-widget-theme-post-content :is(ul, ol) + p {margin-top: 30px;}
.blog-single-wrapper .elementor-widget-theme-post-content p {margin: 0 0 30px;}
.blog-single-wrapper .elementor-widget-theme-post-content p:last-of-type {margin-bottom: 0;}

/*###################################
## Responsive
###################################*/
@media screen and (min-width: 1367px) and (max-width: 1600px) {
	#contact-us .reach-out .boxed {width: 85%;}
}

@media screen and (max-width: 1680px) {
	#the-mansion .key-features .wrapper:before, #the-mansion .key-features .wrapper:after, #salon-11 .key-features .wrapper:before, #salon-11 .key-features .wrapper:after {display: none;}
}

@media screen and (max-width: 1366px) {
	#mansion-salon .container-wrapper .simple-serenity {font-size: 125px;}
}

@media screen and (max-width: 1200px) {
	#find-us .bordered-container:before, #contact-us .find-us .bordered-container:before {display: none;}
}

@media screen and (max-width: 1024px) {
	#mansion-salon .container-wrapper .simple-serenity {font-size: 100px;}
	.inner-banner h1 .first-word {font-size: 27px;}
	#contact-us .inquiry .elementor-form input, .inquiry-full-container .elementor-form input {height: 50px;}
	.blog-single-wrapper .elementor-widget-theme-post-content :is(ul, ol):has(+ :is(h1, h2, h3, h4, h5, h6)) {margin-bottom: 20px;}
	.blog-single-wrapper .elementor-widget-theme-post-content :is(ul, ol) + p {margin-top: 20px;}
	.blog-single-wrapper .elementor-widget-theme-post-content p {margin: 0 0 20px;}
}

@media screen and (max-width: 767px) {
	.simple-serenity {font-size: 70px;}
	#global-footer .quick-links .elementor-nav-menu:after {display: none !important;}
	#global-footer .quick-links nav ul {display: flex; justify-content: center; column-gap: 15px; row-gap: 15px; flex-wrap: wrap;}
	#global-footer .quick-links nav ul li {margin: 0;}
	#global-footer .quick-links nav ul li a {display: block;}
	#mansion-salon .container-wrapper .simple-serenity {font-size: 75px;}
	.inner-banner h1 .first-word {font-size: 25px;}
	#contact-us .inquiry .elementor-form .elementor-button, .inquiry-full-container .elementor-form .elementor-button {padding: 15px 35px;}
	.serenity-mobile-single {line-height: inherit !important; margin-top: 15px;}
	#the-mansion .dates .border-container:before, #the-mansion .dates .border-container:after, #salon-11 .dates .border-container:before, #salon-11 .dates .border-container:after {display: none;}
}