/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* General Fonts */
@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Qwitcher+Grypen:wght@400;700&display=swap');



/* General Custom CSS */
:root {
	/* Blacks */
    --dark-80: #333333;
    --dark-black: #191919;
	
    --black: rgb(0 0 0);   
	--black-10: rgb(0 0 0 / 10%);
    --black-20: rgb(0 0 0 / 20%);
    --black-30: rgb(0 0 0 / 30%);
    --black-40: rgb(0 0 0 / 40%);
    --black-50: rgb(0 0 0 / 50%);
    --black-60: rgb(0 0 0 / 60%);
    --black-70: rgb(0 0 0 / 70%);
    --black-80: rgb(0 0 0 / 80%);
    --black-90: rgb(0 0 0 / 90%);
    --black-100: rgb(0 0 0 / 100%);
    
    /* Whites */
    --white: #ffffff;
    --light-10: rgb(255 255 255 / 10%);
    --light-20: rgb(255 255 255 / 20%);
    --light-30: rgb(255 255 255 / 30%);
    --light-40: rgb(255 255 255 / 40%);
    --light-50: rgb(255 255 255 / 50%);
    --light-60: rgb(255 255 255 / 60%);
    --light-70: rgb(255 255 255 / 70%);
    --light-80: rgb(255 255 255 / 80%);
    --light-90: rgb(255 255 255 / 90%);
    --light-100: rgba(255, 255, 255, 1.0);
    --transparent: rgba(255, 255, 255, 0);

    /* Grays */
 	--gray-100: #f7f7f7;  /* Lightest gray */
  	--gray-200: #f5f5f5;
  	--gray-300: #f4f4f4;
  	--gray-400: #f0f0f0;
  	--gray-450: #acacac;  /* Intermediate gray between 400 and 500 */
  	--gray-500: #8a8a8a;  /* Adjusted Main Gray */
  	--gray-600: #676767;  /* Dark gray */
  	--gray-700: #4f4f4f;  /* Even darker */
  	--gray-800: #3a3a3a;  /* Very dark */
  	--gray-900: #1a1a1a;  /* Near black */

 	/* Base Colors */
	--base-red: #b70c12;			/* Red */
	--base-white: #f8f6f7;			/* Off-White */	
	--base-blue: #14192f;			/* Blue */

    /* Primary Colors */
	--primary-accent: #d6b065; 			/* Gold */	
	--primary-accent-dark: #9e7f43; 	/* Old Gold */
	--primary-natural: #b8ae9f;			/* Sand */
	--primary-natural-light: #ccba9f;	/* Sand */
	--primary-blue: #005586;			/* Company Blue */	

    /* Text Colors */
	--text-white: #ffffff;
	--text-light: #f8f6f7;
	--text-dark: #14192f;
	
	/* Accent Colors */
    --accent-light-blue: #0099cc;
    --accent-yellow: #ffd700;	
	
	
    /* Special Elements */
    --primary-07: rgba(var(--page-primary-color-rgb), .07);
    --secondary-07: rgba(var(--page-secondary-color-rgb), .07);
    --alternate-very-light: rgba(var(--alternate-color-rgb), .3);
    --post-image-gallery-overlay: rgb(0 0 0 / 70%);
    --sticky-menu-shadow: 0px 10px 20px 0px rgb(0 0 0 / 10%);
	
	/* Fonts */
	--base-font: "Baskervville", serif;	
	--base-font-size: 1em;
	
	--accent-font: "Qwitcher Grypen", serif;	
	--accent-font-size: 3.5em;
	
}

body {
	font-family: var(--base-font);
	font-size: var(--base-font-size);
	background-color: var(--base-white);
}

p {
	font-family: var(--base-font);
}

*:focus {
    outline: none;
}

textarea:focus, input:focus{
    outline: none;
}

.background-blue{
	background-color: var(--primary-blue) !important;
}

#intro-home {
    color: var(--white) !important;
    background-color: var(--base-blue) !important;
}

#intro-home .intro-home .flex_column .av-special-heading.superheader-background-header h1.av-special-heading-tag {
    font-family: var(--accent-font) !important;
    font-size: 4em !important;
    color: var(--light-30) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    position: absolute !important;
    top: -0rem !important;
    left: 0 !important;
    line-height: 1.2 !important;
    z-index: -1000 !important;
    width: 100% !important;
}

#intro-home h2 {
    color: var(--light-color) !important;
}

#top #header_meta {
	background-color: var(--base-blue);
    color: var(--light-color) !important;
}

/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
	h1,h2,h3,h4,h5,h6 {
		font-family: var(--base-font);
		font-weight: 400;
		font-style: normal;
	}

	.header-background-font {
		font-family: var(--accent-font);
		font-size: 4em;
		color: var(--light-30);
		font-weight: 400;
		font-style: normal;
		position: absolute;
		top: -9rem;
		left: 0;
		line-height: 1.2;
		z-index: -1000;
		width: 100%;
	}

	.slideshow_align_caption {
		position: relative;
	}

	.header-caption-h1 {
		font-size: 2em;
		color: var(--primary-accent) !important;
		text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); /* Add a black shadow with fade */
		position: absolute;
		top: -130px; /* Adjust this value as needed */
		left: 0;
		width: 100%;
		text-align: center; /* Center the h1 text */
	}

	.avia-caption-title {
		text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* Add a black shadow with fade */
		margin-top: 40px; /* Adjust this value as needed to avoid overlap */
	}
	
	.avia-caption-title span{
		text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.0); /* Add a black shadow with fade */
	}
}



/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */


@media only screen and (max-width: 767px) {
	  /* Add your Desktop Styles here */
	h1,h2,h3,h4,h5,h6 {
		font-family: var(--base-font);
		font-weight: 400;
		font-style: normal;
	}
	
	.header-background-font {
		font-family: var(--accent-font);
		font-size: 6em;
		color: var(--light-30);
		font-weight: 400;
		font-style: normal;
		position: absolute;
		top: -9rem;
		left: 0;
		line-height: 1.2;
		z-index: -1000;
		width: 100%;
	}

	.slideshow_align_caption {
		position: relative;
	}

	.header-caption-h1 {
		font-size: 1.5em;
		color: var(--primary-accent) !important;
		text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); /* Add a black shadow with fade */
		position: absolute;
		top: -100px; /* Adjust this value as needed */
		left: 0;
		width: 100%;
		text-align: center; /* Center the h1 text */
	}

	h2.avia-caption-title {
    	color: var(--light-color) !important;
		font-size: 2em !important;
	}
	
	.avia-caption-title {
		text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* Add a black shadow with fade */
		margin-top: 20px; /* Adjust this value as needed to avoid overlap */
	}
	
	.avia-caption-title span{
		text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.0); /* Add a black shadow with fade */
	}
	
	
	
	.responsive #top #wrap_all #header {
		position: fixed;
	}
	.responsive #top #main {
		padding-top: 131px !important;
	}
}