/*
--Color Palette Definition--

DRC.Orange = 255,83,53 #FF5335  
DRC.Tan = 178,156,133 #B29C85
DRC.Aqua = 48,110,115 #306E73
DRC.Grey = 59,66,76 #3B424C
DRC.Black = 29,24,31 #1D181F

*/

/*Global*/
body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.box {
  background-color: #306E73;
  color: #fff;
  padding: 20px;
  font-size: 1rem;
}

iframe[seamless] { 
    display: block;
}

/*Layout*/
.page {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "navbar "       
        "header "
        "main"
        "sidebar"
        "footer"
        "gutter-left"
        "gutter-right";
 }

@media screen and (min-width: 500px) {    
    .page {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "navbar navbar navbar navbar"       
            "header header header header"
            "main main main sidebar"
            "footer footer footer footer"
            "gutter-left gutter-left gutter-right gutter-right"
        }
}

@media screen and (min-width: 1024px) {    
    .page {
        display: grid;
        grid-template-columns: 10% 1fr 1fr 1fr 1fr 10%;
        grid-template-rows: auto;
        grid-template-areas:
            "gutter-left navbar navbar navbar navbar gutter-right"       
            "gutter-left header header header header gutter-right"
            "gutter-left main main main sidebar gutter-right"
            "gutter-left footer footer footer footer gutter-right";

        }
}

/*Main Layout Areas*/
.header {
        grid-area: header;
    }

.main {
        grid-area: main;
    }

.sidebar {
        grid-area: sidebar;
    }

.navbar {
        grid-area: navbar;
    }

.footer {
        grid-area: footer;
    }

.gutter1 {
        grid-area: gutter-left;
    }

.gutter2 {
        grid-area: gutter-right;
    }

/*Footer Layout Areas*/
.footercontact {
        grid-area: footercontact;
    }

.footercopy {
        grid-area: footercopy;
    }

.footerhour {
        grid-area: footerhour;
    }

.footermap {
        grid-area: footermap;
    }
        
/*Areas*/
.header {
        background-color: #3B424C;
}

.header img {
    display: block;
    margin: auto;
    height: auto;
    max-width: 100%;
} 

.main img {
    display: block;
    margin: auto;
    height: auto;
    max-width: 100%;
} 

.navbar { 
  background-color: #000;
  color: #fff;  
  padding: 0px;
  font-variant: small-caps;
}

.navbar .submenu {
    text-indent: 20px;
}

.navbar .active{
    color: #FF5335;
}

.sidebarcontent{
    background-color: #B29C85;     
    padding: 20px;
}

.footer {
    background-color: #000;     
    display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "footercontact"
            "footerhour"
            "footermap"
            "footercopy";
}

@media screen and (min-width: 500px) {  
    .footer {
        grid-template-columns: 1fr 1fr 290px;
        grid-template-areas:
            "footercontact footerhour footermap"
            "footercopy footercopy footercopy";
    }
}

.footercopy{
    background-color: #000;
    color: #3B424C;
    padding: 20px;
    font-size: .75em;
}

.footercontact{
      background-color: #1D181F;
      color: #FF5335;
      padding: 30px;
      text-align: left;
}

.iconcontain{
    width: 250px;
}

.footerhour{
    background-color: #1D181F;
    padding: 20px;
    text-align: right;
}

.footerhour h3{
    color: #FF5335;
    font-variant: small-caps;
}

.footerhour p{
    color: #B29C85;
}

.footermap{
    background-color: #1D181F;
    padding: 20px;
    align-content: right; 
    text-align: right;
}

.gutter1{
    background: #000; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(right, #000, #444); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #000, #444); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #000, #444); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #000, #444); /* Standard syntax (must be last) */
}  

.gutter2{
    background: #000; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left, #000, #444); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, #000, #444); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, #000, #444); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left, #000, #444); /* Standard syntax (must be last) */
}