/* Mobile-First Approach */
/* Defaults Start */
body                                        {margin:0 5%; padding:0;}
button                                      {display: inline-block; margin: 1px; padding: 4px 8px; border-radius: 100px; text-transform: uppercase; font-size: 1em; font-weight: bold; transition-duration: 0.4s; cursor: pointer;}
.button:hover                               {background-color: white; color: #158080;}                  /* Form Button Hover */
.button                                     {background-color: #158080; color: white;}                  /* Form Button Default */
.ilink                                      {text-decoration:none; font-weight:bolder; color:#158080;}    /* Internal Link Default */
.elink                                      {text-decoration:none; font-weight:bolder; color:darkblue;}   /* External Link Default */
.ilink:hover, 
    .elink:hover                            {opacity: .55;} /* Internal and External link Hover effect */
h1                                          {color: #158080; text-align: center;} /* Used for Page Titles */
h2                                          {color: Black;} /* Used for the First Level Topic Title */
h3                                          {color: black; font-style: italic;} /* Used for the Second Level Topic Title */
h4                                          {color: Black;} /* Used for the Sidebar Title */
h5                                          {color: White; text-decoration: solid underline white; text-underline-position: under;} /* Used for the footer Column Titles */
h6                                          {color: #158080;}

/* Navigation Section Start*/
header                                      {background-color: #158080;}
.logo                                       {margin:0; padding: .5em; text-align: center;}
nav                                         {visibility: hidden; height: 0; padding: .5em; Display: flex; flex-flow: column nowrap; align-items: stretch; text-align: center; text-transform: uppercase;} /* Navigation Group Links */
.nlink                                      {background-color: #158080; border: 2px solid #158080; border-radius: 100px; padding: 4px 8px; margin: .25em; text-decoration: none; font-weight: bold; color: white; transition-duration: 0.4s;} /* Navigation Link Defaults */
.nlink:hover                                {background-color: #158080; border: 2px solid white; border-radius: 100px; opacity: .55;} /* Navigation Link Hover */
.mobile                                     {display: initial; position: absolute; left: 5%; top: .25%; cursor: pointer; border: 2px solid white; width: 3em; height: 3em; padding: 0em; margin: .5em; border-radius: 50%; background: #072A2D; color: white; transition: opacity 250ms ease;}  /* Navigation Button Toggle */
.mobile:focus, 
    .mobile:hover                           {opacity: .75; border: 2px solid #158080;}
.navigation                                 {width: 50%; position: relative;} /* Navigation Menu */
.navigation, 
    .navigation::before, 
    .navigation::after                      {display: block; margin: 0 auto; height: 3px; background: white;}
.navigation::before, 
    .navigation::after                      {content: ''; width: 100%;}
.navigation::before                         {transform: translateY(-6px);}
.navigation::after                          {transform: translateY(3px);}
.visible                                    {visibility: visible; height: auto; position: relative;}
/* Navigation Section End */
/* Main (Body) Area Start */
main                                        {margin: 0; padding: 0; display: flex; flex-wrap: wrap;}
/* Sidebar Information Section Start */
aside                                       {background-color: #15808049; margin: .5em 0; padding: 1em; flex: 1 1 100%; text-align: center;}
/* Sidebar Information Section End */
/* Main Information Section Start */
section                                     {margin: 0; padding: 1em 0; flex: 1 1 70%;}
    /* Personal & Professional Main Pages  */
    .professional                               {margin: 1em; padding: 0;}
    .professionalinfo                           {display: flex; flex-flow: column nowrap; align-items: center; justify-content: space-between; text-decoration: none; padding: .5em 2em; border: 2px solid white; border-radius: 50px;}
    .professionalinfo:hover                     {opacity: .55; border: 2px solid #158080; border-radius: 50px;}
    .titlePicture                           {Display: flex; flex-flow: column nowrap; align-items: center; gap: 1em;}
    .msubitems                              {display: none;}
    /* Contact Form  */
    .cform                                  {margin: 1em 0; padding: 1em; border: 2px solid blue;} /* Contact Form Default */
    .success                                {margin: 1em 0; padding: 1em; border: 2px solid green;} /* Contact Form Success */
    .failure                                {margin: 1em 0; padding: 1em; border: 2px solid red;} /* Contact Form Failure */
    /* Benfits Page  */
    .gtable                                 {width: 100%; border: 2px solid black; border-radius: 25px; padding: .5em;} /* GST Table */
    .grow                                   {text-align: center;} /* GST Row */
    /* EFile Page  */
    .aflisting                              {width: 95%; margin: .5em; padding: .5em;} /* Authorization File Listing */
    .etable                                 {width: 100%; padding: .5em;} /* Authorization Table */
    .erow                                   {text-align: center;} /* Authorization Table's Row */
    /* Representative Page  */
    .rflisting                              {width: 95%; margin: .5em; padding: .5em;}  /* Representative File Listing */
    .rtable                                 {width: 100%; padding: .5em;} /* Representative Table */
    .rrow                                   {text-align: center;} /* Representative Table's Row */
    /* Privacy Page */
    .privacy                                {height: 10%; line-height: 2em; overflow: scroll; border: thin #000 solid; padding: 5px;}
/* Main Information Section End */
/* Main (Body) Area End */
/* Footer Design Start */
footer                                      {background-color: #158080; display: flex; flex-direction: column; align-items: center;}
.owner                                      {text-align: center; align-self: center;} 
.orientation, .services, .media,
    .information                            {padding: 0 1em ; text-align: center;}
.hours, .method                             {text-align: center; color: white;}
.iflink                                     {text-decoration:none; font-weight:bolder; color:white;}    /* Internal Link Default */
.eflink                                     {text-decoration:none; font-weight:bolder; color:darkblue; display: flex; align-items: center; padding: .2em;}   /* External Link Default */
.iflink:hover, .eflink:hover                {opacity: .55;}
.fsmedia                                    {background-color: white; border-radius: 100px; padding: 2px 4px; display: flex; flex-flow: row nowrap; justify-content: space-around; width: 150px;} /* Footer Social Media */
/* Footer Design Start */
/* Defaults End */

@media (min-width: 55em) {
/* Navigation Section Start */
header                                      {display: flex; justify-content: space-between; align-items: center; background-color: #158080;}
nav                                         {margin:0; padding: 1em; visibility: visible; Display:flex; flex-direction: row; justify-content: flex-end; align-items: center;} /* Navigation Group Links */
.logo                                       {margin:.1em; text-align: left;}
.mobile                                     {display: none;}
footer                                      {flex-flow: row wrap; align-items: flex-start; justify-content: left;}
.owner                                      {text-align: left; flex: 0 0 11em;}
.orientation, .services, .media, 
    .information                            {text-align: left; flex: 0 1 10em;}
.hours                                      {text-align: left; flex: 0 0 15em; padding-right: 1em;}
.method                                     {text-align: left; flex: 0 0 18em;}
/* Navigation Section End */
/* Main (Body) Area Start */
main                                        {Display: flex; flex-wrap: nowrap;}
/* Sidebar Information Section Start */
aside                                       {flex: 0 0 10em; text-align: left;}
/* Sidebar Information Section End */
/* Main Information Section Start */
section                                     {margin: 10px; flex: 1 1 70%;}
    /* Personal Services */
    .personalinfo                           {flex-flow: row nowrap; gap: 1em;}
    .titlePicture                           {flex-flow: row nowrap;}
    .msubitems                              {display: initial; color: black;} /* Menue Sub items */
    /* Professional Services */
    .professionalinfo                       {flex-flow: row nowrap; gap: 1em;}
    /* Log In Form  */
    .liform                                 {display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;}
    /* Contact Form  */
    .cform                                  {border: 2px solid blue; display: flex; flex-flow: column nowrap;} /* Contact Form */
    .flexflow                               {display: flex; flex-flow: row wrap; justify-content: space-between;}
    /* Benefits Page */
    .gtable                                 {width: 60%;} /* GST Table */
    /* EFile Page */
    .aflisting                              {width: 60%;} /* Authorization File Listing */
    /* Representative Page */
    .rflisting                              {width: 60%;} /* Representative File Listing */
    /* Privacy Page */
    .privacy                                {height: 35%;}
/* Main Information Section End */
/* Main (Body) Area Start */
/* Footer Section Start*/
.fsmedia                                    {background-color: white; border-radius: 100px; padding: 4px 2px; flex-flow: column nowrap; justify-content: baseline; align-items: center; width: 25px;} /* Footer Social Media */
/* Footer Section End*/
    }