/*===== GLOBAL / GENERAL =====*/

* {box-sizing:border-box; grid-column-gap:0;}

/*===== TAGS =====*/

body { margin:0; background-color:#DDD;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size:16px; font-weight:normal;}
code { font-size: 1.2em; }
header{ display:grid; grid-column-gap:0; 
    grid-template-columns:200px auto; 
    background-color:#FFF;
    border:2px solid #BBB; border-radius:1em;
    border-right-width: 5px; border-bottom-width: 5px;
    margin:1em auto; padding:1.5em 2em;}
footer {background-color:#FFF;
    border:2px solid #BBB; border-radius:1em;
    border-right-width: 5px; border-bottom-width: 5px;
    margin:1em auto; padding:0.5em 2em 0.75em;}
h1 { font-size:2em; margin:20px 0; padding:0; 
     color:#065; font-variant:small-caps;}
h2 { font-size:1.75em; margin:15px 0; padding:0; 
     color:#065; font-variant:small-caps;}
h3 { font-size:1.625em; margin:12px 0; padding:0; color:#065; }
h4 { font-size:1.5em; margin:10px 0; padding:0; }
h5 { font-size:1.25em; margin:10px 0; padding:0; }
h6 { font-size:1.125em;  font-weight:normal; margin:10px 0; padding:0; color:#065; }
hr { height:2px; border-width:0; background-color:#AAA; margin:0 2em;}
p { text-align:justify; }
section {background-color:#FFF;
    border:2px solid #BBB; border-radius:1em;
    border-right-width: 5px; border-bottom-width: 5px;
    margin:1em auto; padding:1.5em 3em;}

/*===== CLASSES =====*/
.ctx {text-align:justify;}
.logo-text {font-family: "Trebuchet MS", Helvetica, sans-serif;
    color:#065; display:block; margin:0; padding:0;}
.txc {text-align:center;}
.txtiny {font-size:0.75em;}
.xc {margin-left:auto; margin-right:auto;}
.xr0 {margin-left:auto; margin-right:0;}
.xr1 {margin-left:auto; margin-right:1em;}
.warn {color:#F00; font-style:italic; font-weight:bold; }

/*===== ELEMENTS IDENTIFIED =====*/
#cbody {display:block; max-width:1000px; margin:0 auto;}
#core {}
#foot_title {text-align:center;}
#foot_info {display:grid;
            grid-template-columns:33% 33% 34%;
            padding-left:4em;}
#header-logo { font-size:45px; margin:0; padding:0;}
#pic_area {padding-top:1em; padding-left:3em;}
#pic_img {display:block; margin:auto; width:320px; height:auto;}
#nav_area {display:grid; grid-template-columns:20% 20% 20% 20% 20%;
            padding:2em 2em;}
#stxt_area {}
#title_bar {display:grid; grid-column-gap:0.5em; grid-template-columns:65% 35%;}

/*===== ELEMENT CHILDS =====*/
#foot_info>div>p {margin-block-start:0.5em; margin-block-end:0.5em;}
#nav_area>a>img {width:36px; height:auto; margin:5px;}
#pic_area>div {padding-right:2em; text-align:justify;}

/*===== RESPONSIVE =====*/

/* Viewport width "mobile" (mob)*/
@media only screen and (max-width: 550px) {
  .mob-hide { display:none; }
  .g-header { grid-template-columns:110px auto; }
  .g-belly { grid-template-columns:100%; }
  .g-foot { grid-template-columns:100%; }
  .txtiny { font-size:1em; }
  body {font-size:14px;}
  header, section, footer { padding:0.5em 0.5em;
    border:none; border-radius:0; }
  header, footer { margin:0; }
  #header-logo { font-size:40px; }
  section { margin:0.25em 0; }
  h1 { font-size:1.625em; margin:10px 0; }
  h2 { font-size:1.5em; margin:8px 0; }
  h3 { font-size:1.325em; margin:6px 0; }
  h4 { font-size:1.25em; margin:5px 0; }
  h5 { font-size:1.125em; margin:5px 0; }
  h6 { font-size:1em; margin:10px 0; }
  #cbody { margin:0;}
  #img-logo { max-width:100px; height:auto; }
}

/* Viewport width "pad" (pad)*/
@media only screen and (min-width: 550px)  and (max-width:900px)  {
  .pad-hide { display:none; }
  #cbody { margin:0; }
  header, section, footer { border-radius:0.5em;
      margin:0.5em auto; padding:1em 1.5em; }
  .g-foot { grid-template-columns:50% 50%; }
}

/* Viewport width "big screen" (big) */
@media only screen and (min-width:900px) {
  .big-hide { display:none; }
}