/* MINE CSS */

/* Character set declaration */
@charset "utf-8";

/* Font face declaration for custom font */
@font-face {
	font-family: Italianno;
	src: url(fonts/Italianno-Regular.woff) format('woff'),
	     url(fonts/Italianno-Regular.ttf) format('ttf');
}

/* Global styling for HTML element */
html {
   background-color: rgb(255, 195, 130);
   font-family: Verdana, Geneva, Arial, sans-serif; 	
}

/* Styling for the body element */
body {
   background-color: rgb(197, 83, 2);  
   margin-left: auto;
   margin-right: auto;
   max-width: 960px;
   min-width: 480px;
   width: 95%;
   border-radius: 25px;
   border: 1.5px solid rgb(0, 24, 158);
   box-shadow: 25px 0 25px rgba(0, 24, 158, 0.6), -25px 0 25px rgba(0, 24, 158, 0.6);
}

/* Styling for the header image within the body */
body > header > img {
   display: block;
   width: 100%;
   border-radius: 25px 25px 0 0;
}

/* Styling for titles */
.text-center-title {
   font-family: Italianno, cursive;
   font-size: 3em;
   line-height: 1.25em;
   text-align: center;
   color: rgb(255, 255, 255);
   text-shadow: 4px 4px 3px rgb(0, 24, 158);
}

/* Styling for tagline */
.text-center-tagline {
	font-size: 1.2em;
	line-height: 1.25em;
	text-align: center;
	color: rgb(255, 255, 255);
}

/* Styling for Attribution text */
.attribution {
   font-size: .6em;
   line-height: 1.25em;
   text-align: center;
   padding: 5px 10px;
   background-color: rgb(255, 195, 130);
   color: rgb(0, 0, 0);
}

/* Styling for trade text */
.text-center-trade {
   font-size: .8em;
   line-height: 1.25em;
   text-align: center;
   padding: 10px 0;
}

/* Styling for horizontal navigation */
nav.hNav {
   background-color: rgb(0, 24, 158);
   display: flex;
   align-items: center;
   margin-bottom: 10px;
   position: relative;
}

nav.hNav img {
    height: 50px;
    padding-right: 1px;
}

nav.hNav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    flex-grow: 1;
}

nav.hNav li {
    flex-grow: 1;
}

nav.hNav a {
    display: block;
    font-family: Italianno, cursive;
    font-size: 2em;
    line-height: 1.25em;
    text-align: center;
    color: rgb(255, 255, 255);
    text-decoration: none;
    flex-grow: 1;
}

nav.hNav a:hover,
nav.hNav a:active {
    background-color: rgb(255, 106, 0);
    border-radius: 10px;
}

/* Styling for social container */
.socialContainer {
   display: flex;
   justify-content: center;
   padding-top: 10px;
}

.socialContainer img {
   max-width: 50%;
   height: auto;
}

/* Media query for responsive design on screens wider than 768px */
@media(min-width:768px) {
   .bodyLeft {
       display: flex;
       width: auto;
       padding: 1em 0;
   }

   .bodyRight {
      display: flex;
      flex-direction: column;
      flex: 1.5;
      width: 50%;
      order: 1;
   }

   .ftrFlex {
      display: flex;
      width: auto;
      padding: 0 1em;
   }
}

/* Footer Styles */
.ftrBox1,
.ftrBox2,
.ftrBox3 {
   flex: 1;
   height: 50%;
   padding-right: 20px;
}

.ftrBox1 {
   padding-top: 12px;
}

.ftrBox2 {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   flex: 2;
}

.ftrBox2 img {
   padding: 5px;
}

.ftrBox4 {
   flex: 1.5;
   height: 50%;
   padding-right: 20px;
}

.ftrBox4 p {
    padding-left: 1em;
}

footer {
   background-color: rgb(0, 24, 158);
   clear: left;
   padding-top: .1em;
   border-radius: 0 0 25px 25px;
}

body > footer {
   font-size: 0.9em;
   color: rgb(255, 255, 255);
}

body > footer p.footer2 {
   padding-top: 20px;
}

body > footer h1 {
   color: rgb(255, 106, 0);
   font-size: 1.1em;
   font-weight: normal;
   letter-spacing: 0.2em;
   margin: 1em 1em 1em 1em;
}

/* Vertical navigation styles */
nav.vNav ul {
   margin-left: 1em;
   line-height: 1.5em;
}

nav.vNav a:link, 
nav.vNav a:visited {
   color: rgb(255, 195, 130);
}

nav.vNav a:hover, 
nav.vNav a:active {
   text-decoration: underline;
}

/* Contact Info Styles */
section#navContact p {
   line-height: 1.1em;
   margin: 1em 0;
}

/* Styling for hamburger button and navigation on small screens */
#hamburgerBtn {
   display: none;
}

@media only screen and (max-width: 768px) {
   nav.hNav {
       position: relative;
   }

   #hamburgerBtn {
       display: block;
       position: absolute;
       top: 0;
       left: 50%;
       transform: translateX(-50%);
       height: 40px;
       margin-right: 10px;
   }

   nav.hNav ul {
       display: none;
       flex-direction: column;
       position: absolute;
       top: 50px;
       left: 0;
       width: 100%;
       background-color: rgb(0, 24, 158);
       padding: 10px;
       z-index: 999;
   }

   nav.hNav ul.show {
       display: flex;
   }

   nav.hNav li {
       margin-right: 0;
       width: 100%;
       text-align: center;
   }

   .byBox-1 {
      padding: 20px;
   }

   .byBox-2 {
      padding: 10px 20px 0 20px;
   }

   .byBox-3 {
      padding: 0px 20px;
   }

   .ftrBox1 {
      margin: 20px;
   }

   .ftrBox4 {
      text-align: center;
   }
   .ftrBox1 {
      display: none;
   }

   .pBox {
      flex: 0 0 calc(50% - 20px);
   }

   .pBox img {
      width: 90%;
      height: auto;
      max-width: 90%;
   }
}

/* Styling for grayscale button */
#btnGray {
   cursor: pointer;
}

/* Styling for newsletter signup form */
#newsletterEmail {
   margin-right: 10px;
   padding: 10px;
   border-radius: 10px;
   box-sizing: border-box;
   width: auto;
}

#newsletterSubmit {
   padding: 10px;
   border-radius: 10px;
   box-sizing: border-box;
   background-color: rgb(255, 106, 0);
   color: white;
   border: none;
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
   cursor: pointer;
}