/***********************/
/*    homepage65a.css  */
/*    2018.11.21 5:00  */
/*    c0de by ronpat   */
/*    and ty...        */
/***********************/
/*  * {outline:1px dotted red}  /* test outline */

/* presets */
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
/* end presets */

h1 {
    position:absolute;
    top:40%;
    left:0;
    width:100%;
    text-align:center;
	font-size:3em; /* ADDED font-size:2em to scale no-CSS / images header text */
    z-index:-1;
}
h2 {
    font-size:2.5em;
    font-family:"Comic Sans MS";
    font-weight:normal;
    text-align:center;
    padding-left:0;
    margin:.125em 0;
}
img {
    display:block;
    width:100%;
    height:auto;
}

/* page frame */
body {
    background:url("../images/bgdark.jpg") repeat 50% 0;  /* 50x50 */
    font-family:"Times New Roman", serif;
    margin:20px;  /* body margin to accommodate .banner shadow. reduces width available for content.  modified in media queries. */
}
.outer {
    max-width:980px;
    margin:0 auto;
}

/* banner structure */
.banner {
    background-color:#fff;
    position:relative;
    box-shadow:0 0 24px 5px #000;  /* shadow around .banner.  modified in media queries. */
    margin:0 auto 0;
    position:relative;
    z-index:1;
}
.banner::before {
    content:"";
    border:14px solid transparent;
    border-image:url("../images/fancybar.png") 14 repeat;
    position:absolute;
    top:9px;
    left:9px;
    right:9px;
    bottom:9px;
    pointer-events:none;  /* Required! to prevent ornamental bar overlay from blocking clicks or hover to .imgbox.  MUST TEST touchscreens! */
}
.banner::after {
    content:"";
    width:40%;
    max-width:400px;
    height:20%;
    background-image:url("../images/arrows.png");
    background-repeat:no-repeat;
    background-position:50% 0;
    background-size:contain;
    position:absolute;
    top:90%;
    left:0;
    right:0;
    margin:0 auto;
}
.border {
    border:100px solid transparent;
    border-image:url("../images/bordergradient.png") 100 repeat;  /* 300x300, bgcolor:#5d5d9d */
    overflow:hidden;
}
/* HTML accessible text removed from the natural flow of the page with absolute positioning and hidden behind content with z-index */
.freightwrap {
    position:relative;
    padding:0 5%;
    font-size:2.25em;
    border:3px dashed lime;
    overflow:hidden;
}
.freightwrap p {
    display:block;
    font-family:"Comic Sans MS";
    font-weight:normal;
    text-align:center;
    margin:.25em auto;
}
.imgbox {
    position:relative;
    text-align:center;
}
.imgbox img:last-of-type {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:-1;
}
.imgbox:hover img:last-of-type,
.imgbox.active img:last-of-type {
    z-index:1;
}

/* content body design */
.contentwrap {
    max-width:940px; /* keeps the body box slightly slimmer than the header at max widths */
    position:relative;
    margin:0 auto;
}
.content {   /* was bodywrap */
    background-color: rgba(255, 255, 255, 0.5);
    border:62px solid transparent;  /* change border-width to change border size */
    border-top:0 none;
    border-image-source:url("../images/contentborder.png");  /* 254x254 */
    border-image-slice:62;  /* note: NO unit of measure = px */
    border-image-repeat:round;
    border-image-outset:5px;  /* 5px */
    overflow:hidden;
    padding:0 1%;  /* space inside the border (ref: box model) */
    margin:0 5px;  /* 5px compensates for border-image-outset */
}

/* content elements */
.content p {
    font-size:1.4em;
    line-height:1.4;
    margin-top:0.5em;
}
.content .slogan {
    text-align:center;
    font-size:2.5em;
    font-weight:bold;
    font-style:italic;
    font-family:"Comic Sans MS";
    text-shadow:2px 2px 5px #f4a442;
	padding:8% 20% 0;
}
.content {
    font-style:normal;
	margin-bottom:2%;
}

/* content boxes */
.right,
.left {
    outline:2px dashed red;
    overflow:hidden;
    margin-bottom:2em;
    padding:0 2.5% 1%;
}
.right img,
.left img {
    max-width:350px;  /* set max-width of images here.  some images may be narrower, none will be wider. */
}
.right .imgwrap,
.left .imgwrap {
    display:table;
    border:4px ridge #000;
    margin:0;
}
.right .imgwrap {
    float:right;
    margin-left:.5em;
}
.left .imgwrap {
    float:left;
    margin-right:.75em;
}

/* unordered list */
ul {
    padding-left:0;
    margin-top:0;
}
ul li {
	font-weight:bold;
	list-style-type:square;
	list-style-position:inside;
	line-height:1.5;
	font-size:1.5em;
	margin:0 3%;
	padding-top:1%;
}
ul li:last-of-type {
	list-style-type:none;
	font-size:2em;
	text-shadow:1px 1px 3px #f46242;
	text-align:right;
	font-family:"Comic Sans MS";
}

/* footer */
.footer {padding-top:0.5%;}
.footer h4 {
	display:table;
	background:#ffe1aa;
	border:4px ridge #000;
    text-align:center;
	padding:1% 3%;
	margin:9% auto 0;
}
.footer div {
    text-align:center;
    margin:0 0.5em 1.5em;
}
.footer a:link {
	display:table;
	font-size:3.5em;
	margin:4% auto 0;
}
.footer a:hover,
.footer a:active,
.footer a:focus {
    text-decoration:none;
    color:#42adf4;
}
.footer a:visited:hover,   /* not tested */
.footer a:visited:active {
    color:#69198b;
}

.footer div:first-of-type a {
    padding:1rem 1rem;
	background-color:#59ffb7;
	border:3px ridge #ccc;
	background:#18b4a2; /* Old browsers */
	background:linear-gradient(to bottom, #18b4a2 0%,#6cf29f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	box-shadow:0.2rem 0.2rem 0.4rem #000;
}
.footer div:first-of-type a:hover,
.footer div:first-of-type a:active {
	background:#1FDDA4; /* Old browsers */
	background:linear-gradient(to bottom, #1FDDA4 0%,#80FF72 100%);
	color:#131584;
}
/* end content elements */

/* media queries scale the residual space beside the outer box, the width of the border image, and the font-size. */
@media screen and (max-width:850px) {
	.freightwrap {font-size:1.9em;}
	.footer a:link {font-size:3em;}
}
@media screen and (max-width:700px) {
    body {margin:18px;}
    .banner::before {
        border-width:13px;
        top:7px;
        left:7px;
        right:7px;
        bottom:7px;
    }
    .border {border-width:80px;}
    .content {border-width:52px;}
	.content .slogan {padding:8% 0 0;}
    .freightwrap {font-size:1.625em;}
    .right.last {  /* this moves the last content section offscreen left at this breakpoint ({display:none;} works too.) */
        position:absolute;
        left:-9999em;
    }
	.left .imgwrap,
    .right .imgwrap {
        float:none;
        margin:0 auto;
    }
	h1 {font-size:1em;}
	footer a:link {font-size:2.875em;}
}
@media screen and (max-width:600px) {
    body {margin:16px;}
    .banner {box-shadow:0 0 20px 4px #000;}
    .banner::before {
        border-width:12px;
        top:6px;
        left:6px;
        right:6px;
        bottom:6px;
    }
    .border {border-width:60px;}
    .content {border-width:42px;}
	.content p {font-size:1.2em;}
	ul li {font-size:1.3em;}
	ul li:last-of-type {font-size:1.6em;}
    .freightwrap {font-size:1.5em;}
	.content .slogan {font-size:2.25em;}
	h2 {font-size:2.25em;}
	.footer div:first-of-type {margin:0 1.5em 1.5em;}
}
@media screen and (max-width:500px) {
    body {margin:14px;}
    .banner::before {
        border-width:11px;
        top:5px;
        left:5px;
        right:5px;
        bottom:5px;
    }
    .border {border-width:40px;}
    .content {border-width:32px;}
	ul li {font-size:1.1em;}
	ul li:last-of-type {font-size:1.4em;}
    .freightwrap {font-size:1.375em;}
    .freightwrap .scrolldown {  /* hides the scroll down text at a reduced size (keeps the box looking square). */
        font-size:0.65em;    /* reduced font-size and visibility:hidden replaces the padding that you had added */
        visibility:hidden;
    }
	.content .slogan {font-size:1.875em;}
	h2 {font-size:2em;}
	.footer a:link {font-size:2.5em;}
}
@media screen and (max-width:400px) {
    body {margin:0 0 12px;}  /* Note that the body margins left, top, right are removed to allow more room for content. The box-shadow becomes buried offscreen. */
    .banner::before {
        border-width:10px;
        top:4px;
        left:4px;
        right:4px;
        bottom:4px;
    }
    .border {border-width:30px;}
    .content {border-width:25px;}
    .freightwrap {font-size:1.125em;}
}
/* end CSS */