/*
 *	CSS corresponding to that suggested by html5pagestructure.com
 */

BODY
{
    position:relative;
    min-height:100vh;
}

BODY > MAIN
{
    box-sizing:border-box;
    min-height:100vh;
    padding-bottom:80px;
}

BODY > FOOTER
{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:80px;
}

/* Defaults */

*
{
min-width:0;
}

.responsive_page_width
{
	position:relative;
}

.responsive_section_width,
.responsive_aside_width
{
	box-sizing:border-box;
	min-width:0;
}

.responsive_section_width:first-child,
.responsive_aside_width:first-child
{
	/* Is this necessary margin-left:0px; */
}

.desktop { display:none; }

.zmagic  { width:100%; }

.hero_text_padding { padding-left:70px; }

.aside_content_width { max-width:131px; }

/* Phone Portrait */

@media only screen and (orientation:portrait) and (resolution:320x568) {

	.responsive_page_width    {   width:280px; }
	.responsive_section_width {   width:280px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:320px; }

	.mini { display:none; }
}

@media only screen and (orientation:portrait) and (device-width:320px) { /* iPhone 4(s) and 5(s) */

	.responsive_page_width    {   width:280px; }
	.responsive_section_width {   width:280px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:320px; }

	.mini { display:none; }
}

@media only screen and (orientation:portrait) and (device-width:360px) { /* iPhone 6, Asus Zenfone */

	.responsive_page_width    {   width:320px; }
	.responsive_section_width {   width:320px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:320px; }

	.mini { display:none; }
}

@media only screen and (orientation:portrait) and (device-width:375px) { /* Samsung Galaxy Nexus */

	.responsive_page_width    {   width:335px; }
	.responsive_section_width {   width:335px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:335px; }

	.mini { display:none; }
}

@media only screen and (orientation:portrait) and (device-width:412px) { /* Nexus 5X */

	.responsive_page_width    {   width:372px; }
	.responsive_section_width {   width:372px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:372px; }

	.mini { display:none; }
}

@media only screen and (orientation:portrait) and (device-width:414px) { /* iPhone 6 Plus */

	.responsive_page_width    {   width:374px; }
	.responsive_section_width {   width:374px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:374px; }

	.mini { display:none; }
}



/* Phone Landscape */

@media only screen and (orientation:landscape) and (device-height:480px) { /* iPhone 4(s) */

	.responsive_page_width    {   width:440px; }
	.responsive_section_width {   width:440px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:440px; }
}

@media only screen and (orientation:landscape) and (device-height:568px) { /* iPhone 5(s) */

	.responsive_page_width    {   width:528px; }
	.responsive_section_width {   width:528px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:513px; }
}

@media only screen and (orientation:landscape) and (device-height:592px) { /* Samsung Galaxy Nexus */

	.responsive_page_width    {   width:552px; }
	.responsive_section_width {   width:552px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:513px; }
}

@media only screen and (orientation:landscape) and (device-height:360px) { /* Asus Zenfone */

	.responsive_page_width    {   width:600px; }
	.responsive_section_width {   width:600px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:513px; }
}

@media only screen and (orientation:landscape) and (device-height:667px) { /* iPhone 6 */

	.responsive_page_width    {   width:627px; }
	.responsive_section_width {   width:627px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:513px; }
}

@media only screen and (orientation:landscape) and (device-height:736px) { /* iPhone 6 Plus */

	.responsive_page_width    {   width:696px; }
	.responsive_section_width {   width:338px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:513px; }
}



/* Tablet Portrait */

@media only screen and (orientation:portrait) and (device-width:768px) { /* iPad 3 */

	.responsive_page_width    {   width:728px; }
	.responsive_section_width {   width:728px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:513px; }
}

@media only screen and (orientation:portrait) and (device-width:1024px) { /* iPad Pro */

	.responsive_page_width    {  width:982px; }
	.responsive_section_width {  width:648px; }
	.responsive_aside_width   {  width:334px; }

	#modal #modal-inner { width:513px; }
}



/* Tablet Landscape */

@media only screen and (orientation:landscape) and (device-height:1024px) { /* iPad 3 */

	.responsive_page_width    {   width:984px; }
	.responsive_section_width {   width:984px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:513px; }
}

@media only screen and (orientation:portrait) and (device-width:1024px) { /* iPad Pro */

	.responsive_page_width    {  width:984px; }
	.responsive_section_width {  width:706px; }
	.responsive_aside_width   {  width:278px; }

	#modal #modal-inner { width:513px; }
}

@media only screen and (orientation:landscape) and (device-height:1366px) { /* iPad Pro */

	.responsive_page_width    {  width:984px; }
	.responsive_section_width {  width:706px; }
	.responsive_aside_width   {  width:278px; }

	#modal #modal-inner { width:513px; }
}


/* Browser 1 Column */

@media only screen and (max-width:335px) and (min-device-width:1025px) {

	.responsive_page_width    {   width:295px; }
	.responsive_section_width {   width:295px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:335px; }

	.mini { display:none; }
}

@media only screen and (min-width:400px) and (max-width:504px) and (min-device-width:1025px) {

	.responsive_page_width    {   width:360px; }
	.responsive_section_width {   width:360px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:400px; }
}

@media only screen and (min-width:504px) and (max-width:740px) and (min-device-width:1025px) {

	.responsive_page_width    {   width:464px; }
	.responsive_section_width {   width:464px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:400px; }
}

@media only screen and (min-width:740px) and (max-width:770px) and (min-device-width:1025px) {

	.responsive_page_width    {   width:700px; }
	.responsive_section_width {   width:700px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:513px; }

	.zmagic  { width:50%; }
}

@media only screen and (min-width:770px) and (max-width:1100px) and (min-device-width:1025px) {

	.responsive_page_width    {   width:770px; }
	.responsive_section_width {   width:770px; }
	.responsive_aside_width   { display: none; }

	#modal #modal-inner { width:513px; }

	.zmagic  { width:50%; }
}

@media only screen and (min-width:1100px) and (max-width:1562px) and (min-device-width:1025px) {

	.responsive_page_width    { width:1060px;  }
	.responsive_section_width { width: 700px;  }
	.responsive_aside_width   { width: 360px; display:block; }

	#modal #modal-inner { width:580px; }

	.desktop { display:block; }
	.mobile  { display:none;  }

	.zmagic  { width:33.3%; }
}

@media only screen and (min-width:1562px) {

	.responsive_page_width    { width:1060px;  }
	.responsive_section_width { width: 700px;  }
	.responsive_aside_width   { width: 360px; display:block; }

	#modal #modal-inner { width:580px; }

	.desktop { display:block; }
	.mobile  { display:none;  }

	.zmagic  { width:33.3%; }
}

BODY
{
    font-family:opensans,helvetica,arial;
    background:#f9f9f9;
    margin:0;
    overflow-y:scroll;
    line-height:1.6;
}

BODY > FOOTER#footer
{
    line-height:80px;
    color:#aaa;
}

FORM
{
	width:100%;
    font-size:14px;
    line-height:40px;
}

FORM >  FIELDSET,
FORM > .fieldset
{
    margin:0;
    border:none;
    border-top:   solid 1px #FFFFFF;
    border-bottom:solid 1px #E5E5E5;
    padding:15px 0;

    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
}

          FORM >  FIELDSET { justify-content:flex-start; }
          FORM > .fieldset { justify-content:flex-start; }
HEADER  > FORM >  FIELDSET { justify-content:center;     }
HEADER  > FORM > .fieldset { justify-content:center;     }

FORM >  FIELDSET:first-child { border-top:    none; padding-top:0;    }
FORM >  FIELDSET:last-child  { border-bottom: none; padding-bottom:0; }
FORM > .fieldset:first-child { border-top:    none; padding-top:0;    }
FORM > .fieldset:last-child  { border-bottom: none; padding-bottom:0; }

FORM >  FIELDSET LABEL,
FORM > .fieldset LABEL
{
    display:block;
    box-sizing:border-box;
    position:relative;
    padding:0 15px;
    flex-basis:100%;
}

FORM >  FIELDSET > LABEL > SPAN,
FORM > .fieldset > LABEL > SPAN
{
    display:block;
}

FORM INPUT
{
    margin:0;
    box-sizing:border-box;
    height:40px;
    padding:10px 20px;
    font-size:inherit;
    line-height:20px;
    width:100%;
    outline:none;
    border:solid 1px #ddd;
}

FORM INPUT[type='checkbox'],
FORM INPUT[type='radio']
{
    width:auto;
    vertical-align:middle;
    padding-left:50px;
    line-height:auto;
    height:auto;
    margin-right:20px;
}

FORM TEXTAREA
{
    margin:0;
    box-sizing:border-box;
    padding:10px 20px;
    font-size:inherit;
    line-height:20px;
    width:100%;
    outline:none;
    border:solid 1px #ddd;
}

FORM >  FIELDSET > LABEL.half_width,
FORM > .fieldset > LABEL.half_width
{
    flex-basis:50%;
}

FORM >  FIELDSET > LABEL.third_width,
FORM > .fieldset > LABEL.third_width
{
    flex-basis:33.3333%;
}

FORM >  FIELDSET > LABEL.quarter_width,
FORM > .fieldset > LABEL.quarter_width
{
    flex-basis:25%;
}

@media only screen and (max-width:740px) and (min-device-width:1025px) {

    FORM >  FIELDSET > LABEL.half_width,
    FORM > .fieldset > LABEL.half_width,
    FORM >  FIELDSET > LABEL.third_width,
    FORM > .fieldset > LABEL.third_width,
    FORM >  FIELDSET > LABEL.quarter_width,
    FORM > .fieldset > LABEL.quarter_width
    {
        flex-basis:100%;
    }
}

FORM .button:not(:first-child)
{
	position:absolute;
	right:0;
	background:none;
	border:none;
	padding-left:0;
	padding-right:0;
}

FORM .button:not(:first-child):hover
{
	text-decoration:underline;
}

.button
{
	display:inline-block;
	box-sizing:border-box;

	text-align:center;
	font-size:inherit;

	margin:0 15px;
	padding:0 50px;
	height:50px;

	line-height:50px;

	background:white;
	color:#333;
	border:solid 1px #333;
	text-decoration:none;

	cursor:pointer;
}

.button.big
{
	font-size:40px;
	line-height:80px;
	height:80px;
	font-weight:300;
}

A.button
{
	padding:0;
}

.button.rounded
{
	border-radius:6px;
}

.button.filled
{
	background:black;
	border:none;
	color:white;
}

.button.filled:disabled
{
	background:black;
	border:none;
	color:#ddd;
	opacity:0.3;
}

.button.filled.primary,
.button.filled.blue
{
	background:#337AB7;
}

.button.filled.success,
.button.filled.green
{
	background:#5CB85C;
}

.button.filled.info,
.button.filled.turquoise
{
	background:#5BC0DE;
}

.button.filled.warning,
.button.filled.orange
{
	background:#F1AD4E;
}

.button.filled.danger,
.button.filled.red
{
	background:#D9534F;
}

SELECT
{
    width:100%;
}

SELECT
{
	/* -webkit-appearance:none; */
	/* -moz-appearance:none; */

    position:relative;
	display:block;
	margin:0;
	height:40px;
	padding:0 0 0 20px;
	background:#f0f0f0;
	color:#555;

	width:100%;
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;

	   border-top:solid 1px #cccccc;
	  border-left:solid 1px #cccccc;
	border-bottom:solid 1px #a6a6a6;
	 border-right:solid 1px #a6a6a6;

	outline:none;

	text-indent:0.01px;
	text-overflow:' ';


	font-size:inherit;
	line-height:40px;
}

SELECT:after
{
    content:"X";

    position:absolute;
    right:0;
    top:0;
    bottom:0;
    link-height:40px;
}

@-moz-document url-prefix()
{
	SELECT
	{
		vertical-align:baseline;
	}
}

BODY > HEADER#header
{
    box-sizing:border-box;
    position:fixed;
    top:0;
    left:0;
    right:0;
    padding:0;
    height:40px;
    line-height:40px;

    background:#A63400;
    color:white;
    border-bottom:solid 1px white;
}

.c { text-align:center; }
.l { text-align:left;   }
.r { text-align:right;  }

.center
{
    margin-left:auto;
    margin-right:auto;
}

.float_left  { float:left;  }
.float_right { float:right; }

BODY > MAIN#main
{
    background:transparent;

    display:         flex;
    flex-direction:  row-reverse;
    flex-wrap:       wrap;
    justify-content: flex-start;
    align-items:     stretch;
    align-content:   flex-start;
    position:        relative;
}

BODY > MAIN.level4 { padding-top:200px; }
BODY > MAIN.level3 { padding-top:160px; }
BODY > MAIN.level2 { padding-top:120px; }
BODY > MAIN.level1 { padding-top: 80px; }
BODY > MAIN.level0 { padding-top: 40px; }

BODY > MAIN#main > *
{
    border:solid 1px #ddd;
    border-top:none;
    border-radius:20px;
    padding:20px;
    background:white;
}

BODY > MAIN#main > HEADER
{
    border-top:solid 1px #ddd;
    border-bottom-left-radius: 0;
    border-bottom-right-radius:0;
}

BODY > MAIN#main > HEADER + ASIDE
{
    border-top-left-radius: 0;
    border-top-right-radius:0;
}

BODY > MAIN#main > HEADER ~ ARTICLE
{
    border-top-left-radius: 0;
    border-top-right-radius:0;
}

BODY > MAIN#main > HEADER ~ FOOTER
{
    border-top-left-radius: 0;
    border-top-right-radius:0;
}

BODY > MAIN#main > ASIDE:first-child
{
    border-top:solid 1px #ddd;
    border-top-left-radius:0;
}

BODY > MAIN#main > ASIDE:first-child + ARTICLE
{
    border-top:solid 1px #ddd;
    border-top-right-radius:0;
}

BODY > MAIN#main > ASIDE:first-child + ARTICLE + FOOTER
{
    border-top-left-radius:0;
    border-top-right-radius:0;
}

BODY > MAIN#main > HEADER + ASIDE:nth-last-child(3)
{
    border-bottom-left-radius: 0;
    border-bottom-right-radius:0;
}

BODY > MAIN#main > HEADER + ASIDE:nth-last-child(2)
{
    border-bottom-left-radius: 0;
}

BODY > MAIN#main > HEADER ~ ARTICLE:nth-last-child(2)
{
    border-bottom-left-radius: 0;
    border-bottom-right-radius:0;
}

BODY > MAIN#main > HEADER + ASIDE + ARTICLE:last-child
{
    border-bottom-right-radius:0;
}

BODY > MAIN#main > ASIDE:first-child:nth-last-child(3)
{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}

BODY > MAIN#main > ASIDE:first-child:nth-last-child(2)
{
    border-bottom-left-radius:0;
}

BODY > MAIN#main > ASIDE:first-child + ARTICLE:last-child
{
    border-bottom-right-radius:0;
}

BODY > MAIN#main > ASIDE:first-child:nth-last-child(3) + ARTICLE
{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}

BODY > MAIN#main > ARTICLE:first-child:last-child
{
    border-top:solid 1px #ddd;
}

BODY > MAIN#main > HEADER,
BODY > MAIN#main > FOOTER
{
    flex-basis:100%;
    background:#f5f5f5;

    min-height: 40px;
    line-height:40px;
}

BODY > MAIN#main > HEADER { text-align:center; }

BODY > MAIN#main > ARTICLE
{
    box-sizing:border-box;
    flex-basis:100%;
}

BODY > MAIN#main > ASIDE
{
    box-sizing:border-box;
    flex-basis:30%;
    background:#f5f5f5;
}

BODY > MAIN#main > ASIDE + ARTICLE
{
    border-right:none;
    flex-basis:70%;
}

BODY > HEADER NAV,
BODY > FOOTER NAV,
BODY >        NAV
{
    line-height:inherit;
}

BODY > HEADER NAV ~ NAV,
BODY > FOOTER NAV ~ NAV,
BODY > NAV    NAV ~ NAV
{
    float:right;
}

BODY > HEADER NAV UL,
BODY > HEADER NAV OL,
BODY > FOOTER NAV UL,
BODY > FOOTER NAV OL,
BODY >        NAV UL,
BODY >        NAV OL
{
    float:left;
    margin:0;
    padding:0;
    list-style-type:none;
    height:40px;
}

BODY > HEADER NAV UL ~ UL,
BODY > HEADER NAV OL ~ UL,
BODY > FOOTER NAV UL ~ UL,
BODY > FOOTER NAV OL ~ UL,
BODY >        NAV UL ~ UL,
BODY >        NAV OL ~ UL
{
    float:right;
}

BODY > HEADER NAV UL > LI,
BODY > HEADER NAV OL > LI,
BODY > FOOTER NAV UL > LI,
BODY > FOOTER NAV OL > LI,
BODY >        NAV UL > LI,
BODY >        NAV OL > LI
{
    display:block;
    list-style-type:none;
    float:left;
}

BODY > HEADER NAV A,
BODY > FOOTER NAV A,
BODY >        NAV A
{
    display:block;
    float:left;
    line-height:inherit;
    color:inherit;
    text-decoration:none;
    padding:0 15px;
    vertical-align:top;
}

BODY > HEADER NAV SPAN,
BODY > FOOTER NAV SPAN,
BODY >        NAV SPAN
{
    display:inline-block;
    vertical-align:top;
    line-height:35px;
}

BODY > NAV OL LI SPAN,
.breadcrumbs SPAN
{
    display:block;
    line-height:35px;
    float:left;
    vertical-align:top;

    font-size:30px;
}

BODY > NAV OL LI SPAN:before,
.breadcrumbs SPAN:before
{
    content:"\0203A";
}

BODY > NAV UL LI SPAN,
.menu SPAN
{
    display:block;
    float:left;
    font-size:28px;
    line-height:15px;
    vertical-align:top;
}

BODY > NAV UL LI SPAN:before,
.menu SPAN:before
{
    content:"\00B7";
    font-size:28px;
    line-height:40px;
    vertical-align:top;
}

BODY > NAV UL LI SPAN:before,
.menu SPAN:before
{
    content:"\00B7";
    xfont-size:28px;
    xline-height:40px;
    xvertical-align:top;
}

BODY > HEADER NAV A:hover,
BODY > FOOTER NAV A:hover,
BODY >        NAV A:hover
{
    opacity:0.8;
}

NAV#nav,
NAV#nav1,
NAV#nav2
{
    box-sizing:border-box;
    position:fixed;
    left:0;
    right:0;
    height:40px;
    line-height:40px;

    border-bottom:solid 1px #aaa;
    background:white;
}

NAV#nav  { top:40px; }
NAV#nav1 { top:40px; }
NAV#nav2 { top:80px; }

BODY > HEADER#header NAV LI
{
    border-right:solid 1px rgba(255,255,255,0.3);
}

BODY > HEADER#header NAV LI:first-child
{
    border-left:solid 1px rgba(255,255,255,0.3);
}

BODY > HEADER#header NAV > A
{
    display:inline-block;
    border-right:solid 1px rgba(255,255,255,0.3);
}

BODY > HEADER#header NAV > A:first-child
{
    border-left:solid 1px rgba(255,255,255,0.3);
}

TABLE
{
    border-collapse:collapse;
}

TABLE
{
    width:100%;
}

TABLE TH,
TABLE TD
{
    position:    relative;
    line-height: 25px;
    padding:     5px 10px;
    text-align:  left;

    font-size:   14px;
    font-weight: 300;
}

TABLE TH SMALL,
TABLE TD SMALL
{
    font-size:   11px;
}

TABLE > THEAD > TR > TH
{
    background:#666;
    color:white;
    border-left:solid 1px rgba(100,100,100,0.2);
}

TABLE > THEAD > TR > TH:first-child
{
    border-left:none;
}

TABLE > TBODY > TR > TD
{
    border-bottom: solid 1px #ddd;

    background:    white;
    color:         #666;
}

ARTICLE HEADER          { text-align:center; line-height:40px; }
ARTICLE HEADER#title    { font-size:40px; }
ARTICLE HEADER#subtitle { font-size:16px; }

ARTICLE PRE
{
    border:                 solid 1px #ddd;
    border-top-left-radius: 20px;
    padding:                20px;
    overflow-x:             scroll;
}

ARTICLE HEADER          { text-align:center; line-height:40px; }
ARTICLE HEADER#title    { font-size:40px; }
ARTICLE HEADER#subtitle { font-size:16px; }

ARTICLE PRE
{
    border:                 solid 1px #ddd;
    border-top-left-radius: 20px;
    padding:                20px;
    overflow-x:             scroll;
}

