/*************************************************** 
GOOGLE FONTS
****************************************************/

@import 'https://70d5a7.claudeassets.com/20240518092501cs_/https://fonts.googleapis.com/css?family=Playfair+Display+SC:400,400i';
@import 'https://9953e4.claudeassets.com/20240518092501cs_/https://fonts.googleapis.com/css?family=Raleway:400,400i,600,600i';
@import 'https://ac12ef.claudeassets.com/20240518092501cs_/https://fonts.googleapis.com/css?family=Julius+Sans+One';

/*************************************************** 
ANDREW NOVIALDI CUSTOM CSS RULES
****************************************************/

html,
body {
	height: 100%;
}

html {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	/* To remove horizontal scrolling */
}


/*************************************************** 
Color
****************************************************/
/*
Light Gold: #D3B570;
Gold: #C6A05B;
Mid Gold: #A7823E;
Darker Gold: #846124;
Light Grey: #8A8A8A;
Dark Grey: #414042;
Pale Blue: #D0ECF5;*/


.grey1 {
	background-color: #F0F0F0;
}

.grey2 {
	background-color: #DCDCDC;
}

.grey3 {
	background-color: #C0C0C0;
}

.grey4 {
	background-color: #A9A9A9;
}

.grey5 {
	background-color: #8D8D8D;
}

.grey6 {
	background-color: #494949;
}

.grey7 {
	background-color: #414141;
}

.grey8 {
	background-color: #292929;
}

.grey9 {
	background-color: #151515;
}

.black {
	background-color: #000000;
}

.gold {
	background-color: #C6A05B;
}

.lightgold {
	background-color: #D3B570;
} 

.midgold {
	background-color: #A7823E;
}

.darkgold {
	background-color: #846124;
}

.navyblue {
	background-color: #0b2b3f;
}

.blue {
	background-color: #49C6F7;
}

.powderblue {
	background-color: #aecfd4;
}

.green {
	background-color: #07B37F;
}

.white-text {
	color: #FFF;
}

.dark-text {
	color: #151515;
}

.gold-title {
	color: #C6A05B;
}


/* Change Highlighted Text Color */

::selection {
	background: #D3B570;
}

::-moz-selection {
	background: #D3B570;
}


/*************************************************** 
WEBFONT
****************************************************/

@font-face {
	font-family: 'headline';
	src: url('https://5d5daa.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/hl-sc.eot');											/* IE9 Compat Modes */
	src: url('https://eff4b4.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/hl-sc.woff') format('woff'), 		/* Pretty Modern Browsers */
	url('https://cf5c8a.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/hl-sc.ttf') format('truetype'), 			/* Safari, Android, iOS */
	url('https://1c8f18.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/hl-sc.svg#headline') format('svg');/* Legacy iOS */
}

@font-face {
  font-family: 'headline-italic';
  src: url('https://eee4ca.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/hl-i.eot'); 
  src: url('https://f24da5.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/hl-i.woff') format('woff'), 
       url('https://a428a8.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/hl-i.ttf')  format('truetype'), 
       url('https://9b78fd.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/hl-i.svg#headline-italic') format('svg'); 
}

@font-face {
  font-family: 'bodytext';
  src: url('https://550a13.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-l.eot'); 
  src: url('https://4bb6a7.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-l.woff') format('woff'), 
       url('https://5a02b9.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-l.ttf')  format('truetype'), 
       url('https://8870c9.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-l.svg#bodytext') format('svg'); 
}

@font-face {
  font-family: 'bodytext-italic';
  src: url('https://f1b2d5.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-l-i.eot');
  src: url('https://4ab905.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-l-i.woff') format('woff'), 
       url('https://8f94da.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-l-i.ttf')  format('truetype'), 
       url('https://f62ecf.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-l-i.svg#bodytext-italic') format('svg'); 
}

@font-face {
  font-family: 'bodytext-sc';
  src: url('https://1e1e50.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-sc.eot'); 
  src: url('https://746110.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-sc.woff') format('woff'), 
       url('https://c14f7e.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-sc.ttf')  format('truetype'), 
       url('https://1916d8.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-sc.svg#sc') format('svg'); 
}

@font-face {
  font-family: 'bodytext-bold';
  src: url('https://f98702.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-m.eot'); 
  src: url('https://3be3bd.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-m.woff') format('woff'), 
       url('https://9503fb.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-m.ttf')  format('truetype'), 
       url('https://389253.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-m.svg#bodytext-bold') format('svg'); 
}

@font-face {
  font-family: 'bodytext-bold-italic';
  src: url('https://03e2f9.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-m-i.eot'); 
  src: url('https://c88c5a.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-m-i.woff') format('woff'), 
       url('https://9241f7.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-m-i.ttf')  format('truetype'), 
       url('https://9885ee.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/webfont/tx-m-i.svg#bodytext-bold-italic') format('svg'); 
}


/* Setting up basic sizing */

html {
	font-size: 14px;
}

body {
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.5px;
}

h1 {
	font-size: 3rem;
	letter-spacing: 3px;
}

h2 {
	font-size: 2rem;
	letter-spacing: 3px;
}

h3 {
	font-size: 1.6rem;
	letter-spacing: 3px;
}

ul > li {
	padding-bottom: 10px;
}


/* Fallback for old browser */
@media only screen and (max-width : 768px) {
    body { font-size: 18px; } 
    h1 { font-size: 27px; }
    h2 { font-size: 23px; letter-spacing: 1px;}
    h2 { font-size: 21px; }   
}

@media only screen and (max-width : 999px) {
    body { font-size: 20px; } 
    h1 { font-size: 30px; }
    h2 { font-size: 26px; letter-spacing: 1px;}
    h2 { font-size: 24px; }   
}


/* To make typography fluid from range of viewport of 400px to 1000px. At the 400px viewport or lower, the font-size is 14px. At 1000px viewport or larger, the font-size is 20px*/
/* font-size: calc( size_on_smallest_screen + (size_on_largest_screen - size_on_smallest_screen) * ( (100vw - small_media_queries_width) / (large_media_queries_width - small_media_queries_width) )); */

@media screen and (min-width: 400px) and (max-width: 1000px) {
	body {
		font-size: calc( 14px + (20 - 14) * ( (100vw - 400px) / ( 1000 - 400) ));
	}
	h1 {
		font-size: calc( 24px + (48 - 24) * ( (100vw - 400px) / ( 1000 - 400) ));
	}
	h2 {
		font-size: calc( 20px + (32 - 20) * ( (100vw - 400px) / ( 1000 - 400) ));
		letter-spacing: calc( 3px + (1 - 3) * ( (100vw - 400px) / ( 1000 - 400) ));
	}
	h3 {
		font-size: calc( 18px + (28 - 18) * ( (100vw - 400px) / ( 1000 - 400) ));
	}
	.dropcap-letter {
		font-size: calc( 80px + (220 - 80) * ( (100vw - 400px) / ( 1000 - 400) ));
	}
}


/*Setting the font-size so it won't get smaller than 14px */

@media screen and (max-width: 400px) {
    body { font-size: 14px; } 
    h1 { font-size: 24px; }
    h2 { font-size: 20px; letter-spacing: 1px;}
    h3 { font-size: 18px; }        
   .dropcap-letter { font-size: 80px; } 
}


/*Setting the font-size so it won't get larger than 20px */

@media screen and (min-width: 1000px){
    body { font-size: 20px; }
    h1 { font-size: 48px; }
    h2 { font-size: 36px;  letter-spacing: 3px;}
    h3 { font-size: 28x; }
   .dropcap-letter { font-size: 220px; } 
}


/*Setting font-family*/

h1, h2, h3, h4, h5, h6 {
	font-family: 'headline', 'Playfair Display SC', serif;
	font-weight: 400;
	font-style: normal;
	font-variant-ligatures: none; /*To turn off Ligatures because the subset doesn't include small caps ligature*/
	-webkit-font-variant-ligatures: none;
}

.headline-italic {
	font-family: 'headline-italic', 'Playfair Display SC', serif;
	font-weight: 400;
}

body,
p {
	font-family: 'bodytext', 'Raleway', sans-serif;
	font-weight: 400;
	font-style: normal;
}

.italic {
	font-family: 'bodytext-italic', 'Raleway', sans-serif;
	font-weight: 400;
}

.sc {
	font-family: 'bodytext-sc', 'Julius Sans One', sans-serif;
	font-variant-ligatures: none;/*To turn off Ligatures because the subset doesn't include small caps ligature*/
	-webkit-font-variant-ligatures: none;
}

.bold {
	font-family: 'bodytext-bold', 'Raleway', sans-serif;
	font-weight: 600;
	font-style: normal;
}

.bold-italic {
	font-family: 'bodytext-bold-italic', 'Raleway', sans-serif;
	font-weight: 600;
}

.stabilo {
	background-color: #D3B570;
/*	padding: 7px;
	background-color: rgba(0, 0, 0, 0.3);*/
}

.greenstabilo {
	background-color: #9ff588;
}

.yellowstabilo {
	background-color: #ffd269;
}

/*************************************************** 
GENERAL CONTAINER RULE
****************************************************/

.container {
	max-width: 1920px;
	width: 100%;
	padding: 0;
	position: relative;
}


/*************************************************** 
SPACING
****************************************************/

.margin-bottom {
	margin-bottom: 30px;
}

.margin-left {
	margin-left: 30px;
}

.spacer-bottom {
	margin-bottom: 30px; /*spacer-bottom will not be negated in smaller viewport, unlike margin-bottom*/
}

.padding-both-sides {
	padding-left: 30px;
	padding-right: 30px;
}

.padding-top {
	padding-top: 30px;
}

.padding-bottom {
	padding-bottom: 30px;
}

.padding-left {
	padding-left: 30px;
}

.padding-right {
	padding-right: 30px;
}

.spacer-left {
	margin-left: 30px;
}

.container-fluid {
	padding-left: 0;
	padding-right: 0;
}

.spacer-collapse {
	height: 100px;
}


/*************************************************** 
SPACING
****************************************************/

.space-tall {
	height: 100px;
}

.space-medium {
	height: 50px;
}

.space-mid {
	height: 30px;
}

.space-short {
	height: 25px;
}


/*************************************************** 
SIDEBAR
****************************************************/
.position-relative {
	position: relative;
}

#sidebar {
	position: absolute;
	margin-right: 30px;
}




/*************************************************** 
TO MAKE IMAGES RESPONSIVE
****************************************************/

img {
	max-width: 100%;
	height: auto;
}

.full-width > img {
	width: 100%;
}

/* To sharpen zoomed out or zoomed in images */
img {
	image-rendering: -moz-crisp-edges;/* Firefox */
	image-rendering: -o-crisp-edges;/* Opera */
	image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;/* IE (non-standard property) */
}


/*************************************************** 
TO MAKE IMAGES ZOOM IN
****************************************************/
/* Chrome, Safari, Opera */
@-webkit-keyframes zoom {
    0%{
         transform:scale(1)
      }
    50%{
         transform:scale(1.2) /*Set how zoom in you want the image to be. For a more dramatic zoom in, set the number higher, but it will look more blurry unless you make an extra large HD image. */
      }
    100%{
         transform:scale(1)
      }
}

/* Standard syntax */
@keyframes zoom {
    0%{
         transform:scale(1)
      }
    50%{
         transform:scale(1.2)
      }
    100%{
         transform:scale(1)
      }
}

/*Apply all images you want to zoom in with .zoom-effect class.
Also make sure that the container div also has overflow: hidden; and set a definite height.*/
.zoom-effect {
    -webkit-animation: zoom 50s infinite; /* Chrome, Safari, Opera */
    animation: zoom 50s infinite;
}
/* "zoom" refers to the @keyframes zoom set above. 50s means that it takes 50seconds
to complete the zoom in and out. Infinite means that the animation is looping forever.
ease is the default animation-timing-function.
Zooming animation cannot be combined with parallax effects.
Zooming animation cannot be responsive. It needs a definite height div. */


/*************************************************** 
STYLING THE LINKS
****************************************************/
a:link {
  text-decoration: none;
}

a {
  color: #C6A05B;
  -webkit-transition: color ease-in 0.5s;
     -moz-transition: color ease-in 0.5s;
       -o-transition: color ease-in 0.5s;
          transition: color ease-in 0.5s;  
}

a:hover, a:active, a:focus {
  color: #846124;
}

.carousel-caption a {
  color: #C6A05B;
  -webkit-transition: color ease-in 0.5s;
     -moz-transition: color ease-in 0.5s;
       -o-transition: color ease-in 0.5s;
          transition: color ease-in 0.5s;  
}

.carousel-small-caption a {
  color: #C6A05B;
  -webkit-transition: color ease-in 0.5s;
     -moz-transition: color ease-in 0.5s;
       -o-transition: color ease-in 0.5s;
          transition: color ease-in 0.5s;  
}

.carousel-caption a:hover {
  color: #846124;
}

.carousel-small-caption a:hover {
  color: #846124;
}

.outline-button a {
  color: #333;
  -webkit-transition: color ease-in 0.5s;
     -moz-transition: color ease-in 0.5s;
       -o-transition: color ease-in 0.5s;
          transition: color ease-in 0.5s;  
}

.outline-button a:hover {
  color: #A7823E;
}

.gold-link a {
  color: #C6A05B;
  -webkit-transition: color ease-in 0.5s;
     -moz-transition: color ease-in 0.5s;
       -o-transition: color ease-in 0.5s;
          transition: color ease-in 0.5s;  
}

.gold-link a:hover {
  color: #846124;
}

.button-padding {
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
}


/*************************************************** 
NAVIGATION
****************************************************/

.navbar {
	background: none;
	border: none;
	margin: 0;
}

object {
	pointer-events: none; /*To make svg logo object clickable*/
}

header .navbar-default .navbar-nav a {
  color: #000;
  -webkit-transition: color ease-in 0.5s;
     -moz-transition: color ease-in 0.5s;
       -o-transition: color ease-in 0.5s;
          transition: color ease-in 0.5s;  
}

header .navbar-default .navbar-nav a:hover {
	color: #A7823E;
}


/**CENTERING LOGO**/
.navbar-header {
	float: none;
}

.nav-center {
	margin: 0;
	float: none;
	min-width: 300px;
}


/**CENTERING NAVIGATION**/
.navbar .navbar-nav {
	display: inline-block;
	float: none;
}

.navbar .navbar-collapse {
	text-align: center;
}


/**OVERLAYING LOGO**/
.navbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background-image: url(https://76e387.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/img/top-haze.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 237px;
	padding-top: 10px;
}

.nav > li {
	font-family: 'bodytext', 'Prompt', sans-serif;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 3px;
	padding: 0 5px;
}

.nav-fleurette {
	margin-top: 16px;
}

header .navbar-toggle {
	background-color: #FFF;
	padding-bottom: 7px;
	border: none;
}

header .navbar-default .navbar-toggle span {
	color: #D4AD42;
}

.logo {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}


/*************************************************** 
WHITE COLORED NAVIGATION
****************************************************/
header .navbar-default .white-navbar-nav a {
  color: #FFF;
  -webkit-transition: color ease-in 0.5s;
     -moz-transition: color ease-in 0.5s;
       -o-transition: color ease-in 0.5s;
          transition: color ease-in 0.5s;  
}

header .navbar-default .white-navbar-nav a:hover {
	color: #A7823E;
}


/**CENTERING NAVIGATION**/

.white-navbar .white-navbar-nav {
	display: inline-block;
	float: none;
}

.white-navbar .navbar-collapse {
	text-align: center;
}

.white-navbar {
	position: absolute;
	top: 12px;
	left: 0;
	right: 0;
	z-index: 10;
	padding-top: 10px;
	background-color: transparent;
}

.white-nav-fleurette {
	margin-top: 12px;
}

.white-navbar .navbar-collapse {
	text-align: center;
}

.white-navbar .white-navbar-nav > li {
	float: left;
}

#nav.affix-top {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	background-color: transparent;
	border: 0;
}

#nav.affix {
	position: fixed;
	top: 0;
	z-index: 10;
	-webkit-transition: all .6s ease-in-out;
}


/*************************************************** 
CAROUSEL
****************************************************/
/*for slide effect instead of fade, disable the code that bears .fade Just right above Hiding Glyphicon. The basic Bootstrap style will take care of it */
    /*.carousel.fade {
      opacity: 1;
    }

    .carousel.fade .item {
      transition: opacity ease-out .7s;
      left: 0;
      opacity: 0;
      top: 0;
      position: absolute;
      width: 100%;
      display: block;
    }

    .carousel.fade .item:first-child {
      top: auto;
      opacity: 0;
      position: relative;
    }

    .carousel.fade .item.active {
      opacity: 1;
    }
    */


/**HIDDING THE GLYPHICON**/

.carousel-control {
	opacity: 0;
}

.carousel-control.right,
.carousel-control.left {
	background-image: none;
}


/**VERTICALLY CENTERING THE GLYPHICON**/
.glyphicon-menu-left,
.glyphicon-menu-right {
	display: inline-block;
	position: absolute;
	top: 50%;
	z-index: 100;
}

.carousel-caption>h1 {
	color: #C6A05B;
	text-shadow: 0 1.5px 0 rgba(0, 0, 0, .7); /* x, y, bluriness, color plus alpha for transparency */
}

.carousel-small-caption>h1 {
	color: #C6A05B;
	text-shadow: 0 1.5px 0 rgba(0, 0, 0, .7); /* x, y, bluriness, color plus alpha for transparency */
}

.carousel-small-caption {
	position: absolute;
	right: 15%;
	bottom: 20px;
	left: 15%;
	z-index: 10;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}

#featured .item {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	height: 100%;
}


/*************************************************** 
THUMBNAIL IMAGE AND HOVER EFFECT
****************************************************/

.thumbnail {
	border: none;
	border-radius: 0;
	-webkit-appearance: none;
	background-color: transparent;
	z-index: 1;
	margin-bottom: 0px;
	padding-top: 0;
	padding-bottom: 0;
}

.hovereffect {
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
	vertical-align: top;/*additional code for the black transparent overlay */
}

.hovereffect .overlay {
	position: absolute;/* Placing the overlay on top of the thumbnail */
	overflow: hidden;
	width: 90%; /* Determined how wide the fleuron */
	height: 100%; /* The original code has 80% but there isn't any noticable difference */
	left: 5%; /* To position the fleuron from the left. 5% from left and 5% from right will center it. 90+5+5=100% */
	top: 30%; /* To position the title and fleuron. Measured from the top*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
					transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0, 1);
			-ms-transform: scale(0, 1);
					transform: scale(0, 1);
}

.hovereffect:hover .overlay {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1);
			-ms-transform: scale(1);
					transform: scale(1);
	z-index: 9999; /* To make the fleuron and h2 appear on top of the black transparent */
}

.hovereffect img {
	display: block;
	position: relative;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
}


/* This code only works in modern browser */
/*.hovereffect:hover img { filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter'); 
	filter: brightness(0.4); /*Determined how dark the overlay is*/
/*-webkit-filter: brightness(0.4);}*/


/* I subtituted the above code with this 
.hovereffect:after and .hovereffect:hover:after to make it works on IE as well */

.hovereffect:after { /*The black transparent overlay that will work in IE */
	content: '\A';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

.hovereffect:hover:after { /* To make black transparent disappear when mouse is not rollover */
	opacity: 1;
}

.hovereffect h2 {
	text-align: center;
	position: relative;
	background-color: transparent;
	color: #FFF;
	padding: 0;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
					transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
	margin: 0.3em 0;
	line-height: 1em;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
	-webkit-transition: color ease-in 0.5s;
		 -moz-transition: color ease-in 0.5s;
		   -o-transition: color ease-in 0.5s;
					transition: color ease-in 0.5s;
}

.hovereffect h2:hover {
	color: #C6A05B;/* Gold */
}

.hovereffect a, .hovereffect p {
	color: #FFF;
	padding: 1em 0;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
					transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0, 100%, 0); /* The 3D effect */
					transform: translate3d(0, 100%, 0);
}


/*The original code had .hovereffect:hover for a, p and h2.But in IE11, the h2 was pushed down beneath the bottom fleuron. 
After testing, the removal of :hover doesn't seem to do changed anything, so I took it out 06June17 */


/*.hovereffect:hover a, .hovereffect:hover p, .hovereffect h2 */

.hovereffect a, .hovereffect p, .hovereffect h2 {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.hovereffect:hover .fleuron-line {
	filter: brightness(1); /* Make the fleuron appear as solid opacity 1 */
	-webkit-filter: brightness(1);
}


/**WIDER THUMBNAIL RULES - It also shares the .hovereffect styles from above **/

.hovereffect .overlaywide {
	position: absolute; /*Placing the overlay on top of the thumbnail */
	overflow: hidden;
	width: 50%; /*Determined how wide the fleuron */
	height: 100%;
	left: 25%; /*To position the fleuron from the left. 5% from left and 5% from right will center it. 90+5+5=100% */
	top: 30%; /*To position the title and fleuron. Measured from the top*/
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
					transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0, 1);
			-ms-transform: scale(0, 1);
					transform: scale(0, 1);
}

.hovereffect:hover .overlaywide {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1);
			-ms-transform: scale(1);
					transform: scale(1);
	z-index: 9999; /*To make the fleuron and h2 appear on top of the black transparent */
}


/*************************************************** 
FADEIN for 2 IMAGES REGULAR THUMBNAIL 4SEC ON 1SEC FADE
****************************************************/

@keyframes fade2 {
  0%   { opacity: 0; }
  10%   { opacity: 1; }
  50%  { opacity: 1; }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}

.fadein2 { 
  position:relative; 
  max-width:632px; 
  padding-bottom: 100%;
}

.fadein2 img { 
  position:absolute; 
  left:0; 
  top:0; 
  opacity:0; 
  animation-name: fade2; 
  animation-duration: 10s; 
  animation-iteration-count: infinite; 
}

.fadein2 img:nth-child(1) {animation-delay: 0s;}
.fadein2 img:nth-child(2) {animation-delay: 5s;}



/*************************************************** 
FADEIN for 3 IMAGES REGULAR THUMBNAIL 4SEC ON 1SEC FADE
****************************************************/

@keyframes fade3 {
  0%   { opacity: 0; }
  6.67%   { opacity: 1; }
  33.33%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}

.fadein3 { 
  position:relative;  
  max-width:632px; 
  padding-bottom: 100%;
}

.fadein3 img { 
  position:absolute; 
  left:0; 
  top:0; 
  opacity:0; 
  animation-name: fade3; 
  animation-duration: 15s; 
  animation-iteration-count: infinite; 
}

.fadein3 img:nth-child(1) {animation-delay: 0s;}
.fadein3 img:nth-child(2) {animation-delay: 5s;}
.fadein3 img:nth-child(3) {animation-delay: 10s;}



/*************************************************** 
FADEIN for 4 IMAGES REGULAR THUMBNAIL 4SEC ON 1SEC FADE
****************************************************/

@keyframes fade4 {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

.fadein4 { 
  position:relative;  
  max-width:632px; 
  padding-bottom: 100%;
}

.fadein4 img { 
  position:absolute; 
  left:0; 
  top:0; 
  opacity:0; 
  animation-name: fade4; 
  animation-duration: 20s; 
  animation-iteration-count: infinite; 
}

.fadein4 img:nth-child(1) {animation-delay: 0s;}
.fadein4 img:nth-child(2) {animation-delay: 5s;}
.fadein4 img:nth-child(3) {animation-delay: 10s;}
.fadein4 img:nth-child(4) {animation-delay: 15s;}



/*************************************************** 
FADEIN for 2 IMAGES WIDE THUMBNAIL 6SEC ON 1SEC FADE
****************************************************/

@keyframes fadewide2 {
  0%   { opacity: 0; }
  7.14%   { opacity: 1; }
  50%  { opacity: 1; }
  57.14%  { opacity: 0; }
  100% { opacity: 0; }
}

.fadein-wide2 { 
  position:relative; 
  max-width:1272px; 
  padding-bottom: 50%;
}

.fadein-wide2 img { 
  position:absolute; 
  left:0; 
  top:0; 
  opacity:0; 
  animation-name: fadewide2; 
  animation-duration: 14s; 
  animation-iteration-count: infinite; 
}

.fadein-wide2 img:nth-child(1) {animation-delay: 0s;}
.fadein-wide2 img:nth-child(2) {animation-delay: 7s;}



/*************************************************** 
FADEIN for 3 IMAGES WIDE THUMBNAIL 6SEC ON 1SEC FADE
****************************************************/

@keyframes fadewide3 {
  0%   { opacity: 0; }
  4.76%   { opacity: 1; }
  33.33%  { opacity: 1; }
  38.09%  { opacity: 0; }
  100% { opacity: 0; }
}

.fadein-wide3 { 
  position:relative; 
  max-width:1272px; 
  padding-bottom: 50%;
}

.fadein-wide3 img { 
  position:absolute; 
  left:0; 
  top:0; 
  opacity:0; 
  animation-name: fadewide3; 
  animation-duration: 21s; 
  animation-iteration-count: infinite; 
}

.fadein-wide3 img:nth-child(1) {animation-delay: 0s;}
.fadein-wide3 img:nth-child(2) {animation-delay: 7s;}
.fadein-wide3 img:nth-child(3) {animation-delay: 14s;}



/*************************************************** 
FADEIN for 4 IMAGES WIDE THUMBNAIL 6SEC ON 1SEC FADE
****************************************************/


@keyframes fadewide4 {
  0%   { opacity: 0; }
  3.57%   { opacity: 1; }
  25%  { opacity: 1; }
  28.57%  { opacity: 0; }
  100% { opacity: 0; }
}

.fadein-wide4 { 
  position:relative; 
  max-width:1272px; 
  padding-bottom: 50%;
}

.fadein-wide4 img { 
  position:absolute; 
  left:0; 
  top:0; 
  opacity:0; 
  animation-name: fadewide4; 
  animation-duration: 28s; 
  animation-iteration-count: infinite; 
}

.fadein-wide4 img:nth-child(1) {animation-delay: 0s;}
.fadein-wide4 img:nth-child(2) {animation-delay: 7s;}
.fadein-wide4 img:nth-child(3) {animation-delay: 14s;}
.fadein-wide4 img:nth-child(4) {animation-delay: 21s;}


/*************************************************** 
FADEIN for 2 IMAGES DESIGN SHOWCASE GALLERY 4SEC ON 1SEC FADE
****************************************************/

@keyframes fade2-gallery {
  0%   { opacity: 0; }
  10%   { opacity: 1; }
  50%  { opacity: 1; }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}

.fadein2-gallery { 
  position:relative; 
  max-width:1200px; 
  padding-bottom: 50%;
}

.fadein2-gallery img { 
  position:absolute; 
  left:0; 
  top:0; 
  opacity:0; 
  animation-name: fade2-gallery; 
  animation-duration: 10s; 
  animation-iteration-count: infinite; 
}

.fadein2-gallery img:nth-child(1) {animation-delay: 0s;}
.fadein2-gallery img:nth-child(2) {animation-delay: 5s;}



/*************************************************** 
SHORT BIOGRAPHY
****************************************************/

.about-short {
	max-height: 800px;
}

.parallax-background {
	background-color: #8b8b8b;
	background-image: linear-gradient(to bottom, #ebebeb, #8b8b8b);
	padding: 0;
}

.short-bio-content {
	position: absolute;
	top: 5%;
}

.red-dropcap {
	float: left;
	padding: 0;
	max-width: 100%;
}

.short-bio-bodytext {
	display: inline-block;
	float: left;
	max-width: 800px;
	padding: 0;
	left: -20px;
}



/*************************************************** 
PARALLAX BACKGROUND
****************************************************/

section {
	position: relative;
	display: block;
	width: 100%;
	height: 800px;
	max-height: 100vh;
	overflow: hidden;
}

section .cover {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
}

section .cover img {
	position: absolute;
	display: block;
	min-width: 100%;
	min-height: 100%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
	object-fit: cover;
}

section .content {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.OF-cover { /* To fix object-fit bug in IE. Add this class to any image with object-fit:cover;*/
	object-fit: cover;
	font-family: 'object-fit: cover';
}


/*************************************************** 
PARALLAX BACKGROUND FOR HERO IMAGES
****************************************************/

.hero-image {
	position: relative;
	display: block;
	width: 100%;
	height: 910px;
	max-height: 100vh;
	overflow: hidden;
}

.hero-image .cover {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero-image .cover img {
	position: absolute;
	display: block;
	min-width: 100%;
	min-height: 100%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
	object-fit: cover;
}

.hero-image .content {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 2;
}


/*************************************************** 
PARALLAX BACKGROUND FOR SHOP
****************************************************/

.hero-image-title-container {
	position: relative;
}

.hero-image-title {
	/*centering horizontally & vertically*/
	position: absolute;
	top: 40%; 
	left: 0; 
	right: 0;
	text-shadow: 0 0.5px 2px rgba(0, 0, 0, .6); /* x, y, bluriness, color plus alpha for transparency */
}


/*************************************************** 
PARALLAX BACKGROUND FOR SMALLER HERO IMAGES
****************************************************/

.hero-image-small {
	position: relative;
	display: block;
	width: 100%;
	height: 640px;
	max-height: 100vh;
	overflow: hidden;
}

.hero-image-small .cover {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero-image-small .cover img {
	position: absolute;
	display: block;
	min-width: 100%;
	min-height: 100%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
	object-fit: cover;
}

.hero-image-small .content {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 2;
}


/*************************************************** 
VIDEO
****************************************************/

.video-header-container {
	position: relative;
	width: 100%;
	height: 910px;
	max-height: 100vh;
	overflow: hidden;
	object-fit: cover !important;
}

.video-container {
	position: relative;
	width: 100%;
	height: 800px;
	max-height: 100vh;
	overflow: hidden;
}

video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	object-fit: cover !important;
}

.cover > img {
	object-fit: cover !important;
}


/*************************************************** 
ANIMATED GIFs is set to only 1280px width max so that the file size doesn't get too heavy 
(Unlike a .jpg image which can extend to 1920px. In Bootstrap it will resized smoothly)
****************************************************/

.animated-gif {
	max-width: 1280px;
}


/*************************************************** 
SHARP BUTTONS
****************************************************/

.sharp {
	border-radius: 0;
}


/*************************************************** 
CUSTOM BTN VALUES
****************************************************/

.btn {
	padding: 14px 24px;
	border: 0 none;
	font-family: "sc";
	letter-spacing: 1px;
	border-bottom: solid 5px #00374A;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
	outline: 0 none;
}

.btn-primary {
	background: #97CCDE;
	color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	background: #33a6cc;
}

.btn-primary:active,
.btn-primary.active {
	background: #007299;
	box-shadow: none;
}


/*************************************************** 
OUTLINE BUTTON
****************************************************/

.outline-button {
	background-color: transparent;
	padding: 14px 24px;
	border: 5px solid white;
	font-family: 'bodytext-sc';
}

.gold-outline-button {
	background-color: transparent;
	padding: 14px 24px;
	border: 5px solid #C6A05B;
	text-transform: uppercase;
	font-size: 2rem;
	letter-spacing: 3px;
}


/*************************************************** 
CUSTOM BTN VALUES
****************************************************/

#play-pause-carousel-button {
	float: right;
	margin-right: 15px;
	margin-top: 5px;
	font-size: .6em;
	border: none;
	border-radius: none;
}

.play-pause-button {
	border: none;
	border-radius: none;
	background: transparent;
	color: #8A8A8A;
	padding: 5px 10px;
}

.play-pause-button:hover {
	color: #414042;
}

.play-pause-button:focus {
	background: #D0ECF5;
	border: none;
	border-radius: none;
}


/************************************************************************************
SCROLL TO TOP
*************************************************************************************/

#scroll-top {
	padding: 0px 5px 0 5px;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 999;
}


/*************************************************** 
SECTION TITLE
****************************************************/

.section-title {
	width: 100%;
	height: 200px;
	text-align: center;
	background-color: #d0e8e1;
}

.title-wrapper {
	background-color: #C6A05B;
	height: 200px;
	display: flex;
	justify-content: center;
}

.title-inner-wrapper {
	height: 31px;
	align-self: center;
}

.title-inner-wrapper ul {
	list-style: none;
	padding: 0;
}

.title-inner-wrapper ul li {
	float: left;
}

.title-inner-wrapper h2 {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 9px;
	padding-left: 6px;
}

.title-fleurette {
	padding-top: 4px;
}

.closing-liner {
	margin: 0 auto;
	margin-top: 30px;
}


/* So that the SVG in IE doesn't show a huge padding on the top and bootm of the image. Don't use max-width. Apply class directly on <img> */
.liner-large,
.liner-medium,
.liner-small {
	width: 100%;
}

.fleuron-line {
	width: 100%;
}


/* For determining liner's width. Wrap the svg in a div and apply a liner-width-small class */

.liner-width-large {
	max-width: 800px;
}

.liner-width-medium {
	max-width: 650px;
}

.liner-width-small {
	max-width: 308px;
}

.fleuron-width {
	max-width: 409px;
}


/*************************************************** 
SERVICES
****************************************************/

.services {
	max-width: 1920px;
}

.clear-padding-margin {
	padding: 0;
	margin: 0;
}

.services-img {
	padding: 0;
}

.services-img > img {
	width: 100%;
	margin-top: 57px;
}

.services-text {
	padding: 30px;
}

.fleuron-one {
	width: 56px;
	height: 275px;
	float: left;
	margin-right: 10px;
	margin-top: 25px;
}

.footnote {
	font-family: 'bodytext-italic', 'Raleway', sans-serif;
	font-weight: 400;
	font-size: .8em;
}

.fleurette-list {
	list-style-image: url('https://9c893c.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/img/nav-fleurette-white.png');
}

.head-image {
	padding: 0 0 10px 0;
}

.twin-child {
	margin-bottom: -99999px;
	padding-bottom: 99999px;
}



/*************************************************** 
SHOP
****************************************************/

.shop-details {
	text-align: center;
	padding-top: 20px;
	margin-bottom: 50px;
	clear: both;
}

.shop-details h3 {
	font-size: 3rem;
}

.price {
	color: #C6A05B;
}


/*************************************************** 
FOOTER
****************************************************/

.footer {
	background-color: #404041;
	position: relative;
	width: 100%;
	color: #FFF;
	padding-bottom: 30px;
	bottom: -30px;
	font-size: 0.8em;
	margin-top: -30px;
}

footer {
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
}

.end-fleurette {
	position: absolute;
	z-index: 10;
	top: -24px;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
		 -moz-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
}

.side-left {
	margin: 40px 0;
	max-width: 450px;
	margin-left: auto;
	margin-right: auto;
}

.logo-footnav {
	text-align: center;
	max-width: 100%;
}

.social-media {
	margin: 40px 0;
	width: 100%;
	text-align: justify; /* text-align and .stretch handle the positioning */
	-ms-text-justify: distribute-all-lines;
			text-justify: distribute-all-lines;
}

.social-media-icon {
	text-align: center;
	width: 3.1em;
	display: inline-block; /* display, *display and zoom fixes inline-block for IE6/7 */
	*display: inline;
	zoom: 1
}

.stretch {
	width: 100%;
	display: inline-block;
	font-size: 0;
	/* font-size and line-height fixes issue with IE6 */
	line-height: 0
}

.social-media-icon img:hover {
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
	-webkit-transition: opacity .5s ease-out;
		 -moz-transition: opacity .5s ease-out;
			 -o-transition: opacity .5s ease-out;
					transition: opacity .5s ease-out;
}

.side-right {
	margin: 40px 0;
	padding-top: 90px;
	padding-left: 50px;
}

.footnav ul {
	list-style: none;
	padding: 0;
	margin-bottom: 60px;
}

.footnav ul li {
	text-transform: uppercase;
	width: 20%;
}

.footnav ul li a {
	color: #FFF;
}

.footnav ul li a:hover {
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
	-webkit-transition: opacity .5s ease-out;
		 -moz-transition: opacity .5s ease-out;
			 -o-transition: opacity .5s ease-out;
					transition: opacity .5s ease-out;
}

.envelope {
	padding-left: 14px;
	max-width: 278px;
}


/*************************************************** 
ARTICLE
****************************************************/

.paragraph {
	max-width: 800px;
	margin: 0 auto;
	position: relative;
	line-height: 1.8;
	word-wrap: break-word;
}

.dropcap {
	float: left;
	margin-right: 15px;
	width: 27%;
	min-width: 98px;
	text-align: center;
	background-color: #D3B570;
	color: #fff;
	margin: 15px 20px 0 0;
	position: relative;
}

.dropcap:before {
	border: 2px solid white;
	content: "";
	position: absolute;
	top: 0.5em;
	bottom: 0.5em;
	left: 0.5em;
	right: 0.5em;
}

.first-paragraph {
	padding-top: 19px;
	padding-top: 6.7%;
}

.dropcap-letter {
	font-family: 'headline-italic';
	color: #FFF;
	float: left;
	letter-spacing: 0;
	line-height: 1.1em;
}

.run-in {
	font-family: 'bodytext-sc', 'Julius Sans One', sans-serif;
}


/* Another Alternative to Center a Div
.center { 
	display: table; 
	margin: 0 auto; 
}*/

.center {
	text-align: center;
	margin: 0 auto;
}

.artwork-specs {
	padding-left: 8%;
	padding-right: 8%;
}

.specs-field {
	display: inline-block;
	width: 80px;
}

.caption-text {
	font-family: 'bodytext-italic', 'Raleway', sans-serif;
	font-weight: 400;
	font-size: .8em;
	color: #6A6A6A;
	padding-top: 5px;
}

.align-left {
	text-align: left;
}

.image-caption {
	font-family: 'bodytext-italic', 'Raleway', sans-serif;
	font-weight: 400;
	font-size: .8em;
	color: #6A6A6A;
	padding-top: 5px;
	text-align: center;
}


/*************************************************** 
INQUIRY FORM
****************************************************/

.width-800 {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 10px;
}

input[type="radio"],
input[type="checkbox"] {
	margin-right: 20px;
	margin-bottom: 20px;
	width: 18px; /*Desired width*/
	height: 18px; /*Desired height*/
	cursor: pointer;
}

.reveal-if-active {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	font-size: 16px;
	transform: scale(0.8);
	transition: 0.5s;
}

label {
	display: block;
	margin: 0 0 3px 0;
	font-family: 'bodytext-bold';
}

input[type=text] {
	width: 100%;
}

input[type="radio"]:checked ~ &,
input[type="checkbox"]:checked ~ & {
	opacity: 1;
	max-height: 100px;
	padding: 10px 20px;
	transform: scale(1);
	overflow: visible;
}


/*************************************************** 
TWIN SECTION
****************************************************/

.twin-wrapper {
	overflow: hidden;
}

.twin-left {
	margin-bottom: -99999px;
	padding-bottom: 99999px;
	padding-left: 50px;
	padding-right: 50px;
}

.twin-right {
	margin-bottom: -99999px;
	padding-bottom: 99999px;
	padding-left: 50px;
	padding-right: 50px;
}

.max-height-wrapper {
	overflow: hidden;
}

.max-height {
	margin-bottom: -99999px;
	padding-bottom: 99999px;
}

.remove-padding {
	padding-left: 0;
	padding-right: 0;
}


/*************************************************** 
EMBED RESPONSIVE
****************************************************/

.embed-responsive {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.embed-responsive-16by9 {
	padding-bottom: 56.25%;
}

.embed-responsive-4by3 {
	padding-bottom: 75%;
}

.youtube-video {
	margin-top: 25px;
}


/*************************************************** 
CONTACT FORM
****************************************************/

.form-control {
	border-radius: 0;
	font-size: 1em;
}


/*************************************************** 
FAQ
****************************************************/

.question:before {
	/* content: counter(chapter) ". ";*/
	float: left;
	width: 1em;
}


/* .question { left: 1em; margin-left: -1em;} */


/*************************************************** 
SCROLL TO TOP
****************************************************/

.cd-top {
	display: inline-block;
	height: 40px;
	width: 40px;
	position: fixed;
	bottom: 40px;
	right: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	/* image replacement properties */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: rgba(198, 160, 91, 0.8) url(https://73c2df.claudeassets.com/20240518092501im_/https://www.andrewnovialdi.com/img/cd-top-arrow.svg) no-repeat center 50%;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .3s 0s, visibility 0s .3s;
		 -moz-transition: opacity .3s 0s, visibility 0s .3s;
					transition: opacity .3s 0s, visibility 0s .3s;
	z-index: 999;
}

.cd-top.cd-is-visible,
.cd-top.cd-fade-out,
.no-touch .cd-top:hover {
	-webkit-transition: opacity .3s 0s, visibility 0s 0s;
		 -moz-transition: opacity .3s 0s, visibility 0s 0s;
					transition: opacity .3s 0s, visibility 0s 0s;
}

.cd-top.cd-is-visible {
	/* the button becomes visible */
	visibility: visible;
	opacity: 1;
}

.cd-top.cd-fade-out {
	/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
	opacity: .5;
}

.no-touch .cd-top:hover {
	background-color: #C6A05B;
	opacity: 1;
}

.cd-top:hover {
	opacity: 1; /* the opacity turns to 1 when rolled over */
}


/*************************************************** 
MEDIA QUERIES
****************************************************/

/* Large Devices, Wide Screens, and Larger */
@media only screen and (min-width: 1200px) {
	.carousel-caption {
		padding-bottom: 40px;
	}

	.carousel-small-caption {
		padding-bottom: 40px;
	}

	.paragraph-two-thirds {
		width: 90%;
	}

	.cd-top {
		height: 60px;
		width: 60px;
		right: 30px;
		bottom: 30px;
	}
}


/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {

	.navbar {
		position: static;
		height: 100%;
	}

	.carousel-caption {
		padding-bottom: 0;
	}

	.carousel-small-caption {
		padding-bottom: 6%;
	}

	.carousel-caption h1 {
		margin-bottom: 0;
	}

	.carousel-small-caption h1 {
		margin-bottom: 0;
	}

	.carousel-indicators {
		bottom: 0;
		margin-top: 0;
		margin-bottom: 0;
	}

	.short-bio-content {
		/* position: inherit;*/
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.title-fleurette {
		padding
		-top: 0;
	}

	.paragraph-two-thirds {
		width: 100%;
	}

	.hero-image {
		height: 760px;
	}

	.spacer-collapse {
		display: none;
	}

	.paragraph {
		padding: 0 10px;
	}
}


/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {

	li.nav-fleurette {
		display: none;
	}

	li.white-nav-fleurette {
		display: none;
	}

	.white-navbar .white-navbar-nav > li {
		float: none;
	}

	.thumbnail {
		margin-bottom: 30px;
	}

	.margin-bottom {
		margin-bottom: 0;
	}

	.banner {
		margin-top: -30px;
	}

	.title-inner-wrapper h2 {
		padding-top: 2px;
	}

	.parallax {
		height: 600px;
		background-position: -100px 0;
	}

	.short-bio-content {
		width: 83.33333333%;
		right: 0;
	}

	.footnav ul {
		margin-bottom: 0;
	}

	.footnav ul li {
		display: inline-block;
		margin-bottom: 30px;
	}

	.hero-image {
		height: 600px;
	}

	.cd-top {
		right: 20px;
		bottom: 20px;
	}

}


/* My Custom Breakpoint To Make It Perfect At All Size and Flows Smoothly */
@media only screen and (max-width: 650px) {
	.carousel {
		min-height: 299px;  /* setting the minimum carousel height in small device. 299 is to avoid a jump in scaling down */
	}

	.carousel-inner > .item > img {
		min-height: 299px;  /* setting the minimum image inside carousel height in small device */
		object-fit: cover;  /* to make inner images fully cover the available space*/
	}

	.carousel-indicators {
		display: none;
	}

	.hero-image {
		height: 500px;
	}
}


@media only screen and (max-width: 580px) {
	.short-bio-content {
		position: inherit;
		width: 100%;
	}

	.short-bio-bodytext {
		background-color: rgba(255, 255, 255, 0.4);
		padding: 0 10px;
	}

	.footnav ul li {
		margin-bottom: 30px;
		display: inherit;
	}

	.side-right {
		padding-top: 0;
	}

	.end-fleurette {
		top: -18px;
	}
}


/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
	body {
		line-height: 1;
	}

	.navbar-toggle {
		width: 20px;
		padding-left: 5px;
		padding-right: 5px;
	}

	.navbar-toggle .icon-bar {
		width: 12px;
	}

	.one {
		display: none;
	}

	.title-inner-wrapper h2 {
		padding-top: 5px;
	}
}

@media only screen and (max-width: 350px) {
	.title-fleurette svg {
		transform: scale(0.6);
	}

	.title-inner-wrapper h2 {
		letter-spacing: 2px;
		padding-top: 7px;
		padding-left: 3px;
	}
}


/* Custom, iPhone Retina */

@media only screen and (max-width: 320px) {
	.container-fluid {
		padding: 0;
	}

	.navbar {
		height: 100%;
	}

	.footnav-content {
		padding-left: 5px;
		padding-right: 5px;
	}

	.side-left {
		padding: 0;
	}

	.side-right {
		padding: 0;
	}
	
	.social-media-icon {
		display: inherit;
		margin: 0 auto;
	}
}


/*For Printing purposes*/

@media print {
	.container {
		width: auto;
	}
}
/*
     FILE ARCHIVED ON 03:29:20 Mar 29, 2024 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 08:11:55 Jun 24, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.446
  exclusion.robots: 0.044
  exclusion.robots.policy: 0.033
  esindex: 0.007
  cdx.remote: 37.245
  LoadShardBlock: 309.814 (3)
  PetaboxLoader3.datanode: 158.58 (5)
  PetaboxLoader3.resolve: 622.089 (3)
  load_resource: 564.651
  loaddict: 127.965
*/