/* Site Effects CSS */
article section::before {
content:'';
position:absolute;
top:0;
bottom:0;
left:calc(-50vw + 50%);
right:calc(-50vw + 50%);
background:inherit;
z-index:-1;
}

/* Site CSS */
:root {
--grid-gap: 0px;
--font1: 'PT Sans', sans-serif;
--font2: 'Roboto';
--font-size: 18px;
--theme_background_1: rgb(35, 117, 228);
--theme_foreground_1: #fff;
--theme_background_2: rgb(214, 214, 214);
--theme_foreground_2: rgb(0, 0, 0);
--theme_background_3: rgb(25, 244, 227);
--theme_foreground_3: rgb(0, 0, 0);
--body_foreground: rgb(0, 0, 0);
--body_background: rgb(0, 0, 0);
--block_color_1:var(--theme_background_1);
--block_color_1_alt:var(--theme_foreground_1);
--block_color_2:var(--theme_background_2);
--block_color_2_alt:var(--theme_foreground_2);
}
body {
background-color:rgb(0, 0, 0);
color:rgb(0, 0, 0);
}
main {
max-width:1280px;
margin:0 auto;
}
@media(min-width: 600px) {
main {
margin:1rem auto;
}
}
header {
background-color:rgb(93, 93, 93);
background-image:url('https://web-cdn.org/s/126/image/african-rural-sunset_keetmanshoop-namibia-1909px.jpg');;
color:rgb(235, 230, 38);
grid-template-areas:'logo logo logo logo logo logo logo logo logo logo logo logo';
min-height:400px;
}
header div#inner {
height:400px;
}
#header_bar {
}
nav {
background-color:rgb(0, 0, 0);
color:rgb(255, 255, 255);
font-size:110%;
}
nav a {
color:rgb(255, 255, 255);
}
nav ul ul {
background-color:rgb(0, 0, 0);
color:rgb(255, 255, 255);
}
nav li:hover, nav li:active, nav li:hover>a, nav li:active>a, nav a.on, nav li.on, #menu_opener:hover::before, nav ul ul li:hover, nav ul ul li:hover>a {
background-color:rgb(0, 0, 0);
color:#ffffff;
}
nav ul {justify-content:space-evenly;}
article {
background-color:rgb(255, 254, 234);
}
aside {
background-color:rgb(255, 254, 234);
}
footer {
background-color:rgb(214, 214, 214);
color:rgb(0, 0, 0);
border-top: 6px solid rgb(0,0,0);
}
@media(min-width: 780px) {
article section {padding: 2rem 2rem;}
aside section {padding: 2rem 2rem;}
footer section {padding: 2rem 2rem;}
}
section.breadcrumb, section.breadcrumb:nth-child(odd) {
background-color:#555555;
color:#ffffff;
}
section.breadcrumb a {
color:#ffffff;
}
#breadcrumbhomeicon {fill:#ffffff;}
@media(min-width: 1000px) {
.header_heading {align-self:center;justify-self:center;}
.header_subheading {align-self:center;justify-self:center;}
}
body#p3201 {}
body#p3202 {}
body#p3443 {}
body#p17374 {}
body#p17448 {}
body#p17449 {}
body#p17450 {}
body#p17654 {}
body#p17645 {}
body#p17384 {}
body#p18717 {}
body#p17623 {}
/* Custom CSS */
/*
code to use a specific image as the header on mobile devices (under 600px wide)
height: 100vw sets the header to be square, so the image should be too.
*/

@media only screen and (max-width: 600px) {
  header {
    background-image: url(https://web-cdn.org/s/126/image/headers/Mobile-Header.jpg?r=271619);
    min-height: 0;
    height: 100vw;
  }
}