@charset "UTF-8";

/* -Layout based on Photons 4p² system - https://design.firefox.com/photon/ */

/* -PAL:
   b l u e . r u s t . g o l d . * * * *  
   #6678a5 , #f5a58d , #f5ef8d , "Lighter"
   #405488 , #ca6d52 , #cac452 , "Light"
   #283d71 , #a84a2e , #a8a12e , "Middle"
   #132658 , #822a10 , #827c10 , "Dark"
   #06153b , #571400 , #575200 , "Darker"  */

body {
   font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
   font-size: 1em;
   font-style: normal;
   font-weight: normal;
   background: #fff;
   color: #fff;
}
.bg-ltblue {
   margin: -20px -8px 0 -8px;
   background: #405488;
}
.bg-midred {
   margin: -20px -8px 0 -8px;
   background: #a84a2e;
}
textarea {
   min-height: 5em;
   max-height: 15em;
   min-width: 27.35em;
   max-width: 27.35em;
}
.center {
   text-align: center;
}
.rightalign {
   text-align: right;
   font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
   font-size: 1em;
   color: #ffffff;
   vertical-align: top;
}
.rustystar {
   color: #f5a58d;
   font-size: 1em;
}
.table {
   width: 100%;
   border: 0;
}
.refs {
   font-size: .7em;
}

/* LINKS */
a {
   font-size: 1em;
}
a:link {
   text-decoration: none;
   color: #a8a12e;
}
a:visited {
   text-decoration: none;
   color: #cac452;
}
a:hover {
   text-decoration: underline;
   color: #fff;
}

/* HEADINGS */
h1 {
   font-size: 2.5em;
   font-style: normal;
   font-weight: bolder;
   padding: 0.5em;
   margin: 0em;
   background: #fff;
   color: #283d71;
   letter-spacing: 0.2em;
   line-height: 1em;
}
h2 {
   padding: 0 0 0.5em 0;
   font-size: 2em;
   font-style: normal;
   font-weight: bold;
   letter-spacing: 0.13em;
   line-height: 0;
}
h3 {
   margin: 0.5em;
   font-size: 1.75em;
   font-style: normal;
   font-weight: normal;
   letter-spacing: 0.3em;
   line-height: 0;
}
h4 {
   margin: 0.1em 0.1em 0.1em 1em;
   font-size: 1.1em;
   font-style: normal;
   font-weight: normal;
   letter-spacing: 0.2em;
   line-height: 1em;
}

/* SECTIONS */
aside {
   display: none;
   width: 8%;
   color: #a84a2e;
   padding: 0 2em;
   margin-left: 15px;
   margin-top: 3em;
   margin-right: 1em;
   background-color: #fff;
   /* border-right: 2px solid blue; */
   float: left;
}
section {
   font-family: Consolas, Monaco, "Courier New", "monospace";
   font-size: 1em;
   /*column-gap: 2em;
   column-width: auto;
   column-rule: 2px solid blue;*/
   padding: 2em 2em; /* Use the first number for top and bottom use the second number for left and right*/
}
footer {
   text-align: center;
   font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
   color: #405488;
   font-size: 1em;
}
/*.column2 {
   padding-right: 1em;
}*/

/* NAVS AND SUCH */
nav ul {
   list-style-type: table;
   position: absolute;
   top: 50%;
   left: 35%;
   transform: translate(5%, -10%);
   width: 40%;
}
nav li {
   display: inline;
   vertical-align: text-bottom;
   line-height: 25px;
   height: 196px;
}
nav ul li {
   position: relative;
   box-sizing: border-box;
   /*border-right: .2em solid #fcc116;*/
   width: 20%;
   text-align: center;
   font-size: 1em;
   font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
   float: left;
   height: 50px;
   top: 70px;
   left: 200px; /* moves menu text */
   overflow: visible;
   z-index: 15;
}
nav ul li a {
   text-decoration: none;
   box-sizing: border-box;
   display: inline-block;
   vertical-align: bottom;
   font-weight: 600;
   color: #283d71;
   text-align: center;
   text-shadow: 2px 3px 1px #fff, -3px -2px 1px #fff, -3px 2px 2px #fff, 3px -2px 2px #fff;
}
nav ul li a:hover {
   background-color: #f5ef8d;
   color: #a84a2e;
}

/* MOBILE MENU */
.mob {
   display: contents;
   max-width: 999px;
}
.desk {
   display: contents;
}

/* MESSY PAINT SPLATS/HEADER */
.paint {
   height: 160px;
   margin-top: -50px;
   z-index: 3;
}
.paint-h{
   background-image: url(../images/header/paints-tr_h.png);
   background-repeat: no-repeat;
   background-position: bottom center;
   transform: translateX(-200px);
   height: 160px;
   z-index: 10;
}
.paint-d {
   background-image: url(../images/header/paints-tr_dc.png);
    background-repeat: no-repeat;
   background-position: bottom center;
   transform: translateX(200px);
   height: 160px;
   z-index: 10;
}
.paint-c {
   background-image: url(../images/header/paints-tr_dc.png);
    background-repeat: no-repeat;
   background-position: bottom center;
   transform: translateX(400px);
   height: 160px;
   z-index: 10;
}
.paint-m {
   background-image: url(../images/header/paints-tr_m.png);
    background-repeat: no-repeat;
   background-position: bottom center;
   transform: translateX(300px);
   height: 160px;
   z-index: 10;
}
.paint-rr {
   background-image: url(../images/header/paints-tr_rr.png);
    background-repeat: no-repeat;
   background-position: bottom center;
   transform: translateX(50px);
   height: 160px;
   z-index: 10;
}

/* SITE DESIGN/LAYOUT IMAGERY */
.mnu-face {
   background-repeat: no-repeat;
   background-position: left;
   width: 215px;
}
.mnu-home {
   background-repeat: no-repeat;
   background-position: left;
   width: 274px;
}
.home-bg {
   background-image: url(../images/header/hdr-1-home.png);
}
.resres-bg {
   background-image: url(../images/header/hdr-1-resres.png);
}
.media-bg {
   background-image: url(../images/header/hdr-1-media.png);
}
.descon-bg {
   background-image: url(../images/header/hdr-1-des.png);
}
.sig-blue-bg {
   background-image: url(../images/header/hdr-2-all.png);
}
.sig-red-bg {
   background-image: url(../images/header/hdr-2-media.png);
}

/*  RESPONSIVE HAEDER/MENU 3 COLUMN LAYOUT */
.header {
   clear: both;
   padding: 0;
   margin: -20px -8px 0 -8px;
   height: 226px;
   display: flex;
   align-items: flex-start;
   overflow: hidden;
   white-space: nowrap;
   position: relative;
   text-align: center;
   color: #283d71;
}
.n-3 {
   width: min-content; /* width width of last section up to 1920px */
}
.n-2 {
   width: 274px; /* width of the signature section of menu */
}
.n-1 {
   width: 216px; /* width of the face section of menu */
}
.span {
   float: left;
   margin: 0;
   height: 226px;
   padding: 0;
}

/* RESPONSIVE IMAGE SHIPPING & HANDLING */
.crop-h {
   width: 2432px;
   height: 226px;
   border: 0;
   object-fit: none;
   object-position: left top;
}
.crop-f {
   width: 2920px;
   height: 113px;
   border: 0;
   object-fit: none;
   object-position: left top;
}

/* RESPONSIVE OLD STINKY FOOTER */
.footer2 {
   clear: both;
   padding: 0;
   margin: -20px -8px 0 -8px;
   height: 113px;
   display: flex;
   align-items: flex-start;
   overflow: hidden;
   white-space: nowrap;
   position: relative;
   text-align: center;
   color: #283d71;
   bottom: 0;
}
.holder-f {
   width: min-content;
   margin: -20px -8px 0 -8px;
   float: left;
   height: 113px;
}
.footer-txt {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.programs {
    float: right;
    width: 52px;
    height: auto;
   text-align: center;
}

.fauxsig {
   z-index: 20;
}


/* ::===<<<!  @MEDIA RESPONSES  !>>>===::
-2021 USA screen resolution stats from:    
Statcounter. (2022). Screen resolution stats worldwide. StatCounter Global Stats. 
https://gs.statcounter.com/screen-resolution-stats    */

/* 360 x 800  - mobile - smallest/most popular size: 8.69%; overall popularity: 5.22% */
@media screen and (min-width: 300px) and (max-width: 499px) {
   /*.mob {
      display: contents;
   }
   .desk {
      display: none;
   }*/
}
/* 414 x 896  - tablet - most popular iPhone size: @15.48%; overall pop.: @7.73% */
@media screen and (min-width: 500px) and (max-width: 999px) {
   /*.mob {
      display: contents;
   }
   .desk {
      display: none;
   }*/
}
/* 1024 x 768 - desktops - smallest, most popular, most ancient */
@media screen and (min-width: 1000px) and (max-width: 1920px) {
  /* .mob {
      display: none;
   }*/
}