@charset "utf-8";
/* CSS Document */
html,  body {
	margin: 0 !important;
	padding: 0 !important;
	height: 100% !important;
	width: 100% !important;
	
}
		
h1 {
  font-size: 6vh;
}
h2 {
  font-size: 4vh;
  font-family: sans-serif;
  color: white;
  
}
h3 {font-size: 3.25vh;
	font-family: sans-serif;
	font-variant: small-caps;
	color: black;
		}
h4 {font-size: 2.5vh;
	font-family: sans-serif;
	color: black;
	}
	
p {font-family: sans-serif;
  font-size: 2.5vh;
  color: black;
  
}
		
		.menuItem {
			color: chocolate
		}		
.spacer {height: 60px}
.title { background-color: black;
		color: white;
		}
.navbar {
  overflow: hidden;
  background-color: chocolate;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.parallax1 {
  /* The image used */
  background-image: url( "../imgCapers/italian-cuisine-2378729_1920.jpg");
 
  /* Set a specific height */
  min-height: 800px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax2 {
  /* The image used */
  background-image: url(" ../imgCapers/goulash-g762c46caf_1920.jpg");
 
  /* Set a specific height */
  height: 400px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax3 {
  /* The image used */
  background-image: url( "../imgCapers/AdobeStock_219651111.jpeg");
 
  /* Set a specific height */
  height: 400px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}				
.parallax4 {
  /* The image used */
  background-image: url("../imgCapers/barbecue-gda8aa0010_1920.jpg");
 
  /* Set a specific height */
  height: 400px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}	
.parallax5 {
  /* The image used */
  background-image: url(" ../imgCapers/bread-g0ad46f940_1920.jpg" );
 
  /* Set a specific height */
  height: 400px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}	
.parallax6 {
  /* The image used */
  background-image: url(  "../imgCapers/AdobeStock_214601237.jpeg" );
 
  /* Set a specific height */
  height: 400px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax7 {
  /* The image used */
  background-image: url(  " ../imgCapers/AdobeStock_117693514.jpeg");
 
  /* Set a specific height */
  height: 600px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}	
.parallax8 {
  /* The image used */
  background-image: url(  "  ../imgCapers/AdobeStock_164296844.jpeg");
 
  /* Set a specific height */
  height: 600px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}	
* {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

div[style*="margin: 16px 0"] {
	margin: 0 !important;
}

table,  td {
	mso-table-lspace: 0pt !important;
	mso-table-rspace: 0pt !important;
}

table {
	border-spacing: 0 !important;
	border-collapse: collapse !important;
	table-layout: fixed !important;
	margin: 0 auto !important;
}
table table table {
	table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
	-ms-interpolation-mode: bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
	border-bottom: none !important;
}
/* What it does: Another work-around for iOS meddling in triggered links. */
a[x-apple-data-detectors] {
	color: inherit !important;
}
 .container {
  position: relative;
  text-align: center;
  color: white;
}
		.centered {
  position: absolute;
  top: 8rem;
  left: 50%;
  transform: translate(-50%, -50%);
  
}
      
        .button-td,
        .button-a {
            transition: all 100ms ease-in;
        }
        .button-td:hover,
        .button-a:hover {
            background: #555555 !important;
            border-color: #555555 !important;
        }

        /* Media Queries */
        @media screen and (max-width: 900px) {

            .email-container {
                width: 100% !important;
            }

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid,
            .fluid-centered {
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            /* And center justify these ones. */
            .fluid-centered {
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }
        
            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }
                
        }