/* ********************************************************************************
	Fine Art Chapala Website - SITE-SPECIFIC CSS

Site colour scheme:
	Backgrounds: white and dark brown (#423B3E)
	Elements and text: black, red, light blue (#056FFD), orange (#E44F0D), and mauve (#744FDD)
	Links: blue
	Buttons: Normal: green; Hover: dark mauve (#40086B)

 Jan 23 2023: Created – Garry Musgrave
******************************************************************************** */
body, html{
	height: 100% !important;
}
body {
	overflow-x: hidden;
	font-family: 'Verdana', sans-serif;
	font-weight: 400;
	letter-spacing: .05em;
	font-size: 16px;
	line-height: 1.4;
	color: #000000;
	position: relative;
/*	background: #FFFFFF; */

	background: #FFFFFF url(../images/bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	background-size: cover !important;
}

::selection {
	background: #000;
	color: #fff;
}
::-moz-selection {
	background: #000;
	color: #fff;
}
* {
	margin: 0;
	padding: 0;
	outline: 0;
}

:focus {
	outline: 0
}

a, a:hover, a:focus {
	color: #000;
	outline: 0;
	text-decoration: underline;
	color: blue;
	font-weight: 700;
	z-index:999;
}
/*a {
	text-decoration: underline;
}*/
.row-flex {
  display: flex;
}
.col-v-centered {
  display: flex;
  align-items: center;
}

img {
	max-width: 100%;
	height: auto;
	display: inline-block;
	border: none;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

.main_logo {
	width: 30% !important;
	height: auto;
}

.poster {
	width: 40% !important;
	height: auto;
}

::-webkit-input-placeholder {color: inherit}
:-moz-placeholder           {color: inherit}
::-moz-placeholder          {color: inherit}
:-ms-input-placeholder      {color: inherit}

.breadcrumbs {
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	margin-left:10px;
	margin-top:-20px;
	margin-bottom: 10px;
}
.breadcrumbs-noheadimg {
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	margin-left:10px;
	margin-top:10px;
}


/* typography
---------------------------*/
/* Font Awesome Brand Icons */
.fab {
    font-family: "Font Awesome 5 Brands";
}

h1, h2, h3, h4, h5, h6 {
	font-family: Verdana, Geneva, sans-serif;
	font-weight: 700;
	margin-top: 10px;
}
h1 { font-size: 3.125em; color:#E44F0D; }
h2 { font-size: 2.5em; color: #056FFD; margin-top:1em; }
h3 { font-size: 1.5em; color: #000000; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.25em; }
h6 { font-size: 1em; }

.title{
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: yellow;
	margin-top: 0.5em !important;
}
.title-tooltip{
	position: relative;
	padding: 10px 20px;
	background-color: #000;
	color: #fff;
	display: inline-block;
	margin-bottom: 20px;
}
.title-tooltip:after{
	content: '';
	position: absolute;
	left: 10px;
	bottom: -14px;
	border: 7px solid transparent;
	border-top-color: #000;
}
.title-tooltip-white{
	background-color: #fff;
	color: #000;
}
.title-tooltip-white:after{
	border-top-color: #fff;
}
.title-tooltip-yellow{
	background-color: yellow;
	color: #000;
}
.title-tooltip-yellow:after{
	border-top-color: yellow;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child
{
	margin-top: 0px;
}

.small, p.small{
	font-size: 90%;
	font-weight: 300;
}

.text-yellow  { color: yellow }
.text-orange  { color: #FBB700 }
.text-left   { text-align: left }
.text-right  { text-align: right }
.uppercase  { text-transform: uppercase }
.capitalize { text-transform: capitalize }
.bold   { font-weight: bold }
.bolder { font-weight: bolder }
.italic { font-style: italic }
.underline{ text-decoration: underline }

.citation {
	font-size: 0.8em;
	font-style: italic;
}

.fullwidth  { width: 100% }
.fullheight { height: 100% }
.fullscreen-width { width: 100vw }
.fullscreen-height{ height: 100vh }


.bg-grey{ background-color: #474747; }
.bg-dark{ background-color: rgba(0, 0, 0, 0.9); }

.centered {
	text-align: center;
}
.highlight {
	background-color: #000;
	color: #fff;
}
.overflow{
	overflow: hidden;
}
.relative{
	position: relative !important;
}
.absolute{
	position: absolute !important;
}
.fixed{
	position: fixed !important;
}


/* Paddings & Margins */
.p0   { padding: 0px !important  }
.p10  { padding: 10px !important }
.p20  { padding: 20px !important }
.p30  { padding: 30px !important }
.p40  { padding: 40px !important }
.p50  { padding: 50px !important }
.p60  { padding: 60px !important }
.p70  { padding: 70px !important }
.p80  { padding: 80px !important }
.p90  { padding: 90px !important }
.p100 { padding: 100px !important}
.p110 { padding: 110px !important}
.p120 { padding: 120px !important}
.p130 { padding: 130px !important}
.p140 { padding: 140px !important}

.m0   { margin: 0px !important  }
.m10  { margin: 10px !important }
.m20  { margin: 20px !important }
.m30  { margin: 30px !important }
.m40  { margin: 40px !important }
.m50  { margin: 50px !important }
.m60  { margin: 60px !important }
.m70  { margin: 70px !important }
.m80  { margin: 80px !important }
.m90  { margin: 90px !important }
.m100 { margin: 100px !important}
.m110 { margin: 110px !important}
.m120 { margin: 120px !important}
.m130 { margin: 130px !important}
.m140 { margin: 140px !important}

.ml0   { margin-left: 0px !important  }
.ml10  { margin-left: 0.6em !important }
.ml20  { margin-left: 1.3em !important }
.ml30  { margin-left: 1.8em !important }
.ml40  { margin-left: 2.5em !important }
.ml50  { margin-left: 3em !important }
.ml60  { margin-left: 3.8em !important }
.ml70  { margin-left: 4.4em !important }
.ml80  { margin-left: 5em !important }
.ml90  { margin-left: 5.6em !important }
.ml100 { margin-left: 6.3em !important}

.pt0   { padding-top: 0px !important  }
.pt10  { padding-top: 10px !important }
.pt20  { padding-top: 20px !important }
.pt30  { padding-top: 30px !important }
.pt40  { padding-top: 40px !important }
.pt50  { padding-top: 50px !important }
.pt60  { padding-top: 60px !important }
.pt70  { padding-top: 70px !important }
.pt80  { padding-top: 80px !important }
.pt90  { padding-top: 90px !important }
.pt100 { padding-top: 100px !important}
.pt110 { padding-top: 110px !important}
.pt120 { padding-top: 120px !important}
.pt130 { padding-top: 130px !important}
.pt140 { padding-top: 140px !important}

.pb0   { padding-bottom: 0px !important  }
.pb10  { padding-bottom: 10px !important }
.pb20  { padding-bottom: 20px !important }
.pb30  { padding-bottom: 30px !important }
.pb40  { padding-bottom: 40px !important }
.pb50  { padding-bottom: 50px !important }
.pb60  { padding-bottom: 60px !important }
.pb70  { padding-bottom: 70px !important }
.pb80  { padding-bottom: 80px !important }
.pb90  { padding-bottom: 90px !important }
.pb100 { padding-bottom: 100px !important}
.pb110 { padding-bottom: 110px !important}
.pb120 { padding-bottom: 120px !important}
.pb130 { padding-bottom: 130px !important}
.pb140 { padding-bottom: 140px !important}

.mt-2   { margin-top: -2em !important  }
.mt-108   { margin-top: -1.8em !important  }
.mt-105   { margin-top: -1.5em !important  }
.mt-1   { margin-top: -1em !important  }
.mt-08   { margin-top: -0.8em !important  }
.mt-05   { margin-top: -0.5em !important  }
.mt0   { margin-top: 0px !important  }
.mt10  { margin-top: 10px !important }
.mt20  { margin-top: 20px !important }
.mt30  { margin-top: 30px !important }
.mt40  { margin-top: 40px !important }
.mt50  { margin-top: 50px !important }
.mt60  { margin-top: 60px !important }
.mt70  { margin-top: 70px !important }
.mt80  { margin-top: 80px !important }
.mt90  { margin-top: 90px !important }
.mt100 { margin-top: 100px !important}
.mt110 { margin-top: 110px !important}
.mt120 { margin-top: 120px !important}
.mt130 { margin-top: 130px !important}
.mt140 { margin-top: 140px !important}

.mb0   { margin-bottom: 0px !important  }
.mb10  { margin-bottom: 10px !important }
.mb20  { margin-bottom: 20px !important }
.mb30  { margin-bottom: 30px !important }
.mb40  { margin-bottom: 40px !important }
.mb50  { margin-bottom: 50px !important }
.mb60  { margin-bottom: 60px !important }
.mb70  { margin-bottom: 70px !important }
.mb80  { margin-bottom: 80px !important }
.mb90  { margin-bottom: 90px !important }
.mb100 { margin-bottom: 100px !important}
.mb110 { margin-bottom: 110px !important}
.mb120 { margin-bottom: 120px !important}
.mb130 { margin-bottom: 130px !important}
.mb140 { margin-bottom: 140px !important}

.auto-center { 
	margin-left: auto !important;
	margin-right:auto !important;
}
	
.negative-margin{
	margin-top: -100px;
}

.top-spacer {
	 margin-top:4em;
}

/* Isotope Gallery Overrides */
.isotope-button-group .link {
  position: relative;
	font-family: 'Oswald';
  font-weight: bold;
  font-size: 0.7em;
  display: inline-block;
  margin: 8px;
  cursor: pointer;
  opacity: .7;
  letter-spacing: 1px;
  color: #FFFFFF;
  border: 2px solid #000000;
  padding: 0.5em;
  background-color: #056FFD;
  text-transform: none !important;
}
.isotope-button-group .link:hover {
  text-decoration: none;
  color: #FFFFFF;
}
.isotope-button-group .link:active, .isotope-button-group .link.is-checked {
  opacity: 1;
  color: #000000;
  border: 2px solid #056FFD;
  padding: 0.5em;
  background-color: #E44F0D;
}

.isotope-grid .isotope-grid-item {
  color: #000000 !important;
  height: auto !important;
  font-size:0.8em !important;
}
.isotope-grid a, .isotope-grid a:hover {
  color: blue !important;
}
.isotope-name {
  float: none !important;
  display: inline !important;
  font-size: 1em !important;
  color: #000000 !important;
}
.isotope-grid .isotope-item .isotope-title {
  font-size: 1.2em;
  color: #E44F0D;
  text-transform: none;
  font-weight: 700;
}
.isotope-blog {
  text-align: left !important;
  text-indent: 1.25em !important;
  font-size: 0.9em;
  color: #000000 !important;
}

/* Separators
---------------------------*/
.separator, .separator-left, .separator-right {
	width: 100%;
	display: inline-block;
	position: relative;
}
.separator:after, 
.separator-left:after, 
.separator-right:after {
	content: '';
	width: 14em;
	height: 0.2em;
	background-color: #000;
	position: absolute;
	top: 50%;
	margin-top: -0.5em;
}
.separator:after {
	left: 50%;
	margin-left: -20px;
}
.separator-left:after {
	left: 0;
	margin-left: 0;
}
.separator-right:after {
	right: 0;
	margin-left: 0;
	left: auto;
}
.darkbg [class*="separator"]:after {
	background-color: #fff
}


/* Boxes
---------------------------*/
.offer-box {
  font-size: 1em;
  width: 80%;
  border: 1px solid #CCC;
  padding: 1em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  margin-top: 2em;
}


/* buttons
---------------------------*/
.button {
	font-size: 13px;
	padding: 8px 26px 6px;
	display: inline-block;
	background: #000;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 1px;
	text-decoration: none;
	-webkit-transition: background .2s, color .2s, border-color .2s;
			transition: background .2s, color .2s, border-color .2s;
}
.button:hover {
	text-decoration: none;
	background: #333;
	color: #fff;
}
.button.light {
	background: #fff;
	color: #000;
}
.button.light:hover {
	background: #DCDCDC;
}
.button.outline {
	background: none;
	color: #000;
	border: 2px solid;
	padding: 7px 24px 5px;
}
.button.outline.light {
	color: #fff;
}
.button.outline:hover {
	background: #000;
	border-color: #000;
	color: #fff;
}
.button.outline.light:hover {
	background: #fff !important;
	border-color: #fff;
	color: #000;
}


/*backgrounds*/
[data-background]{
	-webkit-background-size: cover;
			background-size: cover; 
	background-position: center center; 
}


/* Left side of split container on Bio Page, Contact Page, & Art Item pages */
.bio-split {
margin-top:6em;
}
.contact-split {
margin-left:3em;
}
.contact-split p {
margin-left:6em;
}
.art-split {
margin-top:1em;
}


/* Contact Form */
.contact-form {
	
}

/* Overrides for contact-form.css */
.form_outer_div {
  background-color: transparent !important;
}

.form_outer_div label {
/*  position: relative;
  right: 0.875em !important; */
	float: right;
  font-size: 1.25em !important;
  color: #E44F0D !important;
}

/* parallax images
---------------------------*/
.pBackground {
	height: 50vh;
	background-repeat: no-repeat;
	position: relative;
}
/* Main Page Title on top of parallax image */
.pBackground span {
	bottom: 0;
	color: #FBB700; /* Orange text */
	display: block;
	font-size: 5em;
	padding: 10px;
	padding-left: 20px;
	position: absolute;
	/* text-align:center; */
	text-shadow: 0 2px 0 black, 0 0 10px black;
	width: 1280px;
}
@supports (-webkit-text-stroke: 2px black) {
	.pBackground span {
		-webkit-text-stroke: 2px black; /* Add a black stroke, if supported */
	}
}

/* *****************************************************************************
	We use .WEBP images by default. However, if the browser doesn't support webp,
	we need to substitute .JPG images
	
	Modernizr sets classes for the HTML tag (global) to indicate support (.webp)
	or non-support (.no-webp)
****************************************************************************** */
/* Bio Page Parallax Image */
.webp .bio-photo {
	background-image: url(../images/home/Chamber_of_Stones.webp);
}
.no-webp .bio-photo {
	background-image: url(../images/home/Chamber_of_Stones.jpg);
}
/* Online Store Page Parallax Image */
.webp .store-photo {
	background-image: url(../images/home/El_Rey_Gallo.webp);
}
.no-webp .store-photo {
	background-image: url(../images/home/El_Rey_Gallo.jpg);
}
/* What is Digital Painting? Page Parallax Image */
.webp .digital-painting-photo {
	background-image: url(../images/home/Quetzalcoatl.portion.webp);
	background-position: 50% -300px !important;
}
.no-webp .digital-painting-photo {
	background-image: url(../images/home/Quetzalcoatl.portion.jpg);
	background-position: 50% -300px !important;
}
/* Green Art Page Parallax Image */
.webp .green-photo {
	background-image: url(../images/home/Chameleon_and_Rose.webp);
	background-position: 50% -150px !important;
}
.no-webp .green-photo {
	background-image: url(../images/home/Chameleon_and_Rose.jpg);
	background-position: 50% -150px !important;
}
/* Custom Art Page Parallax Image */
.webp .custom-art-photo {
	background-image: url(../images/home/Nectar_de_Amarilis.webp);
	background-position: 50% -350px !important;
}
.no-webp .custom-art-photo {
	background-image: url(../images/home/Nectar_de_Amarilis.jpg);
	background-position: 50% -350px !important;
}
/* Contact Garr Page Parallax Image */
.webp .contact-photo {
	background-image: url(../images/home/Chamber_of_Stones.webp);
	background-position: 50% -350px !important;
}
.no-webp .contact-photo {
	background-image: url(../images/home/Chamber_of_Stones.jpg);
	background-position: 50% -350px !important;
}

[data-stellar-background-ratio] {
	-webkit-background-size: cover;
			background-size: cover;
	background-position: center 0;
	background-attachment: fixed !important;
	background-repeat: no-repeat;
	position: relative;
}


/* bootstrap columns
---------------------------*/
.main-wrapper{
	height: 100%;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
.portfolio-wrapper {
	height: 100%;
	padding-top: 7em;
}
.container, .section, section{
	position: relative;
	z-index:0;
}
.container.fullwidth{
	padding: 0;
	padding-left: 1em;
	padding-right: 1em;
}
.container.no-padding [class*="col-"],
.container-fluid.no-padding [class*="col-"]{
	padding: 0;
	margin-bottom: 0;
}
.col-center {
	float: none;
	margin: 0 auto;
}
.col-right {
	float: right;
}

.equal-height-cols [class*="col-"]{
	margin-bottom: 0;
}
.p0{
	margin-bottom: 0;
}


/* 02. PRELOADER
------------------------------*/
.animsition-loading{
	background: none !important;
	text-indent: -9999px !important;
}
.animsition-loading:after{
	content: "";
	display: block;
	position: fixed;
	width: 30px;
	height: 30px;
	top: 50%; 
	left: 50%;
	margin-top: -20px;
	margin-left: -20px;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.2);
	border-left: 2px solid #000;
	-webkit-animation: load 1.1s infinite ease;
			animation: load 1.1s infinite ease;	
}

@-webkit-keyframes load {
	0% {
		-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
				transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
				transform: rotate(360deg);
	}
}
@keyframes load {
	0% {
		-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
				transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
				transform: rotate(360deg);
	}
}


/* 03. HEADER 
------------------------*/
#header{
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	color: #FFFFFF;
	background-color: #423B3E;
	z-index: 999;
	text-align: center;
}
#header.fixed{
	position: fixed;
}
#header.has-border{
	border-bottom: 1px solid #F1F1F1;
}

/* LOGO */
#header .logo{
	font-family: 'Oswald', serif;
	font-size: 27px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 2px;
	margin-top: 0px;
	margin-left:10px;
	display: inline-block;
	text-decoration: none;
}
#header .logo img{
	max-height: 75px; 
}
#header .tag-line {
/*	margin-top: 1.5em; */
	margin-top: 0.8em;
	color:yellow;
}


/* NAVIGATION MENU */
#header nav{
	display: block;
	text-align: center;
	margin: 0;
}
.nav-menu{ 
/*	margin-right: 20px; */
padding-right: 10px;
}
.main-menu{ 
	display: inline-block;
	margin-bottom: 0;
	margin-top: 20px;

	position: relative;
	right: 0;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
.main-menu > li{ 
	display: inline-block; 
	float: left;
	position: relative;
/*	margin: 20px 13px 0; */
	margin: 0px 13px 0;
}

.active-menu-item{ 
	color: yellow !important;
}
.main-menu > li > a{ 
	display: block; 
	float: left; 
	text-decoration: none; 
	padding: 0px;
	padding-bottom: 4px;
	margin-bottom: 10px;
	font-size: 1em;
	font-weight: 700; 
	position: relative; 
	line-height: 1.4;
	color:white;
}


.main-menu ul li>a:after {
	position: absolute;
	content: "";
	width: 0;
	height: 6px;
	left: 0;
	bottom: 8px;
	background: #E44F0D;
	z-index: -1;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

.main-menu > li > a:before{ 
	content: '';
	display: block; 
	position: absolute; 
	height: 6px; 
	background-color: #E44F0D; 
	bottom: 0px;
	left: 0; 
	width: 100%;
	-webkit-transform: scaleX(0);
		-ms-transform: scaleX(0);
			transform: scaleX(0);
	-webkit-transition: all .3s ease;
			transition: all .3s ease;
} 

.main-menu > li:hover > a:before{
	-webkit-transform: scaleX(1);
		-ms-transform: scaleX(1);
			transform: scaleX(1);
}

.main-menu > li > ul{ 
	position: absolute; 
	top: 100%; 
	left: -10px; 
	background-color: #fff; 
	list-style: none; 
	min-width: 200px;
	visibility: hidden; 
	opacity: 0; 
	-webkit-transition: all .3s ease;
			transition: all .3s ease;
	border-bottom: 4px solid #000;
	-webkit-box-shadow: 0px 0px 3px 0px rgba(6, 6, 6, 0.14);
			box-shadow: 0px 0px 3px 0px rgba(6, 6, 6, 0.14);
}
.main-menu ul{
	padding: 1px 0;
}
.main-menu > li > ul > li{ 
	position: relative; 
}
.main-menu > li > ul li a{ 
	text-decoration: none; 
	text-align: left; 
	width: 100%; 
	display: block; 
	padding: 11px 17px 9px; 
	text-transform: uppercase;
	line-height: 1;
	font-size: 12px;
	font-weight: 500;
	color: #444;
	white-space: nowrap;
	border-bottom: 1px solid #f1f2f3;
	-webkit-transition: all .3s ease;
			transition: all .3s ease;
}
.main-menu > li > ul li:last-child > a{
	border-bottom: 0 !important;
}
.main-menu > li:hover > ul{ 
	visibility: visible; 
	opacity: 1;
}
.main-menu > li > ul li:hover > a{
	opacity: .7;
	text-indent: 5px;
}

/*III level menu*/
.main-menu ul ul{
	opacity: 0; 
	visibility: hidden;
	list-style: none;
	position: absolute;
	left: 100%;
	top: 0; 
	min-width: 200px; 
	background-color: #fff;
	-webkit-transition: all .3s ease;
			transition: all .3s ease;
	border-bottom: 4px solid #000;
	-webkit-box-shadow: 0px 0px 3px 0px rgba(6, 6, 6, 0.14);
			box-shadow: 0px 0px 3px 0px rgba(6, 6, 6, 0.14);
}
.main-menu > li > ul > li:hover > ul{ 
	visibility: visible; 
	opacity: 1;
}
/*dropdown arrow*/
.main-menu .dropdown:after{
	content: '\f358';
	font-family: 'Font Awesome 5 Free';
	position: relative;
	float: right;
	top: -1px;
	font-size: 12px;
}


/* SWIPER – HOME PAGE IMAGES
-----------------------*/
.swiper-container,
.swiper-wrapper,
.swiper-slide,
.swiper-slide [data-background]{
	height: 100%;
	height: 100vh;
}
.kenburns .swiper-slide [data-background]{
	-webkit-transform: scale(1);
		-ms-transform: scale(1);
			transform: scale(1);
	-webkit-transition: transform 6.5s linear;
			transition: transform 6.5s linear;
}
.kenburns .swiper-slide-active [data-background]{
	-webkit-transform: scale(1.2);
		-ms-transform: scale(1.2);
			transform: scale(1.2);
}


/* 05. PORTFOLIO
---------------------------------/

/*PORTFOLIO*/
.portfolio .grid-item a{
	color: #000 !important;
	position: absolute;
	overflow: hidden;
	left: 0; right: 0; bottom: 0; top: 0;
}
.portfolio .grid-item a .img{
	position: absolute;
	left: 0; right: 0; bottom: 0; top: 0;
/*	-webkit-transform: scale(1.09);
		-ms-transform: scale(1.09);
			transform: scale(1.09); */
	-webkit-transition: all .3s ease;
			transition: all .3s ease;
}
.portfolio .grid-item a:hover .img{
	-webkit-transform: scale(1);
		-ms-transform: scale(1);
			transform: scale(1);
}
.portfolio .grid-item .hover{
	position: absolute; 
	left: 0; right: 0; bottom: 0; top: 0;display: flex;
	justify-content: flex-end;
	align-items: flex-end;
/*	background-color: rgba(255, 255, 255, .78); */
	background-color: #056FFD;
	color: white;
	opacity: 0;
	-webkit-transition: all .3s ease;
			transition: all .3s ease;
}
.portfolio .grid-item a:hover .hover{
	opacity: 1;
}
.portfolio .grid-item a .hover .centered{
	width: 100%;
	padding: 0 20px;
}
.portfolio .grid-item a .hover h5{
/*	text-transform: uppercase; */
  font-family: 'Oswald';
	letter-spacing: .05em;
}
.portfolio .grid-item a .hover h6{
/*	text-transform: uppercase; */
  font-family: 'Oswald';
	letter-spacing: .05em;
	color:yellow;
}
.portfolio .grid-item a .hover p{
	font-size: 13px;
}

/*PORTFOLIO FILTER*/
.filter{
	text-align: center;
	/* NOTE: default font size is 16px */
	margin-top: 1em; 
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 1.25em;
}
.filter ul{
	display: inline-block;
	border: none;
	margin-bottom: -0.325em;	
}
.filter ul li{
	position: relative;
	font-weight: bold;
	font-size: 11px;
	display: inline-block;
	margin: 8px;
	cursor: pointer;
/*	opacity: .7; */
	letter-spacing: 1px;
	color: #FFFFFF;
	border: 2px solid #000000;
	padding: 0.5em;
	background-color: #056FFD;
}
.filter ul li.active{
	opacity: 1;
	color: #000000;
	border: 2px solid #056FFD;
	padding: 0.5em;
	background-color: #E44F0D;
}
.filter ul li.active:after{
	opacity: 1;
	bottom: 2px;
}


/* 06. PAGE ELEMENTS
----------------------------*/

/* Hide mobile-only messages */
.mobile-msg {
	display: none;
}

/* FOOTER
-----------------------*/
#footer{
	position: relative;
	height: 50px;
	width: 100%; 
/*	width: 125%; */
	bottom: 0;
	left: 0; 
/*	left: -165px; */
	color: #FFFFFF;
	background-color: #423B3E;
	z-index: 999;
	
	text-align:center;
}
#footer.fixed{
	position: fixed;
}
#footer.has-border{
	border-top: 1px solid #F1F1F1;
}
.footer-links{
	font-family: Verdana, Geneva, sans-serif;
	line-height: 50px;
	padding-left: 0px;
	padding-right: 0px; 
	color:yellow;
}
.footer-links a{
	color: #E44F0D !important;
	text-decoration: none;
}
.footer-links a:hover{
	text-decoration: underline;
}
.left-footer{
	text-align: left;
	padding-left: 4em;
	font-size:0.5em;
	font-weight:bold;
}
.mid-footer{
	text-align: center;
	font-size:0.9em;
	font-weight:bold;
}
.right-footer{
	text-align: right;
	padding-right: 4em;
	font-size:0.9em;
	font-weight:bold;
}

/* SOCIAL SHARING ICONS */
.share {
	padding-left: 0px;
}
.share-btn {
    width: 1.75em;
	height: 1.75em;
    display: block;
    color: #fff;
    text-align: center;
    float: left;
	margin-right:0.5em;
	font-size: 2em;
	border-radius: 50%;
	margin-bottom: 0.5em;
}
.share .fab {
   margin-top: 0.35em; 
}
.facebook {
    background-color: #3b5998;
}
.gplus {
    background-color: #dd4b39;
}
.twitter {
    background-color: #55acee;
}
.stumbleupon {
    background-color: #eb4924;
}
.pinterest {
    background-color: #cc2127;
}
.linkedin {
    background-color: #0077b5;
}

/* SLIDE CAPTION */
.active-slide-caption{
	font-family: Verdana, Geneva, sans-serif;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
			transform: translateX(-50%);
	line-height: 50px;
	display: none;
color:yellow;
}
.active-slide-caption a{
	position: relative;
	text-decoration: none;
}
.active-slide-caption a:after{
	content: '';
	width: 100%;
	height: 1px;
	background-color: #000;
	position: absolute;
	left: 0;
	bottom: 0;
	-webkit-transition: all .3s ease;
			transition: all .3s ease;
}
.active-slide-caption a:hover:after{
	width: 82%;
	left: 9%;
}

.equal-height-cols.fullwidth .row{
	margin: 0
}


/* ******************************************************* */
/* ****************** CUSTOM CSS - GNM ******************* */
/* ******************************************************* */
/* Language Switcher Buttons */
.language-button_es {
    display: inline-block;
	position: absolute; /* or fixed */
	right: 0; /* placed 0px from right edge */
    padding: 13px 15px;
    margin: 10px;
	background-image: url('../images/spain.png');
	background-repeat: no-repeat; /* Prevents the image from repeating */
	background-position: center; /* Centers the image within the button */
	background-size: cover; /* Ensures the image covers the entire button area */	
	width: 100px; /* Set desired width for the button */
	height: 50px; /* Set desired height for the button */
    color: black;
	text-align: center; /* Optional: Center text if needed */
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
}

.language-button_es:hover {
	color: green;
    text-decoration: none;
}

.language-button_en {
    display: inline-block;
	position: absolute; /* or fixed */
	right: 0; /* placed 0px from right edge */
    padding: 13.5px 15px;
    margin: 10px;
	background-image: url('../images/united-kingdom.png');
	background-repeat: no-repeat; /* Prevents the image from repeating */
	background-position: center; /* Centers the image within the button */
	background-size: cover; /* Ensures the image covers the entire button area */	
	width: 100px; /* Set desired width for the button */
	height: 50px; /* Set desired height for the button */
    color: yellow;
	text-align: center; /* Optional: Center text if needed */
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
}

.language-button_en:hover {
	color: white;
    text-decoration: none;
}

/* CSS for Modal Lightbox */
.modal {
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	display: flex;
	justify-content: center;
	align-items: center;
}
.modal-content {
	max-width: 90%;
	max-height: 90vh;
	object-fit: contain;
}
.close-button {
	position: absolute;
	top: 15px;
	right: 35px;
	color: yellow;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
}
.close-button:hover,
.close-button:focus {
	color: green;
	text-decoration: none;
}

/* CSS for Image Slider */
.slider-container {
	position: relative;
	width: 100%;
	max-width: 700px;  /* Set the maximum width for the slider window */
	height: auto;
	margin: 30px auto; /* Center the slider window horizontally */
	overflow: hidden;
}
.slider {
	display: none;
}
.slider.active {
	display: block;
}
.slider img {
	max-height: 400px;  /* Set the maximum height for the images */
	max-width: 100%;  /* Make the width match the aspect ratio */
	width: auto;  /* Make the width match the aspect ratio */
	height: auto;
	display: block;  /* Centre the images */
	margin: 0 auto;  /* Centre the images */				
}
.caption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px;
	background-color: rgba(228, 79, 13, 0.7);
	color: #FFFFFF;
	text-align: center;
	font-size: 0.8em;
	font-weight: 700;
}
.prev-arrow,
.next-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: transparent;
	border: none;
	color: white;
	font-size: 30px;
	z-index: 1;
}
.prev-arrow {
	left: 10px;
}
.next-arrow {
	right: 10px;
}


/* ******************************************************* */
/* ********** RESPONSIVE DESIGN  SUPPORT ***************** */
/* ******************************************************* */
/* Typography */
@media (max-width: 768px) {
	body { font-size: 16px;}
	h1   { font-size: 2em;}
	h2   { font-size: 1.5em;}
	h3   { font-size: 1.5em;}
	h4   { font-size: 1.25em;}
	h5   { font-size: 1em;}
	h6   { font-size: 0.875em;}
}

/* Page Elements */
@media (max-width: 1024px) {
	#header.fixed{
		position: relative !important;
	}
	.pBackground span {
		font-size: 3em;
		Text-align: left;
		margin-bottom: 1em;
	}
}
@media (max-width: 768px) {
	#header.fixed{
		position: relative !important;
	}
	.pBackground span {
		font-size: 3.5em;
		Text-align: left;
		margin-bottom: 1em;
		width: 300px;
		line-height: normal;
	}
}

/* Bootstrap columns */
@media (max-width: 991px) {
	[class*="col-md"] {
		margin-bottom: 40px;
	}
}
@media (max-width: 767px) {
	[class*="col-sm"] {
		margin-bottom: 40px;
	}
}

/* Split pages */
@media (max-width: 850px) {
	.bio-split {
		margin-top: 0px;
		max-height: 400px;
	}
}
@media (max-width: 500px) {
	.bio-split {
		margin-top: 0px;
		max-height: 200px;
	}
}

/* Parallax Images */
@media (max-width: 1024px) {
	[data-stellar-background-ratio] {
		background-attachment: scroll;
		background-position-y: center !important;
	}
}

/*Mobile Menu*/
.mob-menu{
	display: none;
	position: absolute;
	right: 50px;
	top: -15px; 
	color:yellow;
}
@media( max-width: 1281px ){
	.main-menu > li {
		margin-top:0px;
	}

}
@media( min-width: 1025px ){
	.main-menu{
		display: inline-block !important;
	}
}
@media( max-width: 991px ){
	.mob-menu{
		display: block;
	}
	#header .logo{
		margin-top: 17px;
		margin-bottom: 17px;
	}
	#header nav{
		text-align: left;
		padding-left: 20px;
		max-height: calc(100vh - 153px);
		overflow-y: auto;
		overflow-x: hidden;
		margin-bottom: 0;
		padding-bottom: 10px;
	}
	.head-spacer {
		display: none;
	}
	.tag-line {
		display: none;
	}

	.main-menu .dropdown:after{
		display: none;
	}
	.main-menu{
		display: none;
	}	
	.main-menu > li {
		display: block;
		float: none;
		padding-bottom: 10px;
	}
	.main-menu > li > a{
		float: none;
	}
	.main-menu > li > a:before{
		display: none;
	}
	.main-menu > li > ul{
		position: relative;
		opacity: 1;
		visibility: visible;
		border-bottom: 0;		
		left: 10px;
	}
	.main-menu ul ul{
		position: relative;
		opacity: 1;
		visibility: visible;
		border-bottom: 0;
		left: 20px;
		margin: 10px 0;
	}
}

/* MISC. RESPONSIVE STUFF */
@media( max-width: 991px ){
	/* Top-of-page spacing */
	.top-spacer {
		margin-top:-2em;
	}
	.pt80, .pt100 {
		Padding-top:40px !important;
	}
	.p100 {
		Padding-left:5px !important;
		padding-right:5px !important;
	}
	/* Social Sharing Buttons */
	.share-btn {
		margin-right: 1em;
	}
	/* Portfolio Page */
	.portfolio-wrapper {
		padding-top: 0;
		margin-left: 10px;
		margin-right: 10px;
	}
	/* Make text spacing better */
	p {
		margin-bottom: 15px !important;
		margin-left:5px;
		margin-right:5px;
	}
	/* Tighten up internal links */
	.int-links{
		margin-top:-40px;
		padding-left:10px;
		padding-right:10px;
	}
	/* Show any mobile-only messages */
	.mobile-msg {
		display: block;
		Margin-left:5px;
		margin-right:5px;
		Text-align:center;
		color: yellow;
		font-weight: 700;
	}
	/* Fix Tooltip-style Headings */
	.title-tooltip {
		margin-left: 10px !important;
	}
	/* Creative Prompt Generator */
	.sg-spacer {
	  margin-top: 0 !important;
	}
	.sg-intro {
	  width: 90% !important;
	 }
	.sg-output {
	  width: 90% !important;
	}
	.sg-hints {
	  width: 90% !important;
	}
	/* Contact Form */
	.contact-split {
	  margin-left: 0;
	}
	.contact-form {
		margin-top:-40px;
	}
	.contact-label {
		margin-bottom: 10px;
	}
	.contact-spacer {
		display:none;
	}
	/* Art Pages */
	.offer-box {
	  width: 100%;
	  text-align:center;
	}
}

/* RESPONSIVE FOOTER */
@media( max-width: 991px ){
	#footer{
		height: 7em;
	}
	.footer-links.pull-left{
		margin-left:10px;
		margin-right:10px;
		padding-left:15px;
		padding-right:10px;
	}
	.footer-links.mid-footer {
		display: none;
	}
	.footer-links.right-footer {
		margin-left:8em;
		padding-left:15px;
		margin-top:15px;
		float:left !important;
	}
	.footer-links {
		font-size:0.875em;
		line-height: 20px;
		margin-bottom: 0px;
	}
	.footer-links.mid-footer {
		display:none;
	}
}