/* Fonts loaded in HTML footer script to prevent halting of page loads @import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700'); */
/* IE does not support variables!!! */

/* CSS Reset
---------------------------------------*/
* {
    margin:         0;
    padding:        0;
    border:         0;
    font:           inherit;
    font-size:      inherit;
    letter-spacing: inherit;
    word-spacing:   0.05em;
    line-height:    1.2em;
    color:          inherit;
    box-sizing:     border-box;
    /*letter-spacing: 0em;*/
    /*outline:      1px dashed black; /*for debugging*/
    /*background-color: red;            /*for debugging*/
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

a {text-decoration :none;}
ul {list-style: disc outside none;}
ol {list-style: decimal outside none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*=======================================
    GRID
=======================================*/

/* Flex center container, object within will be centered
---------------------------------------*/
[class*="fp-"] {
    display: flex;
    width: 100%;
    height: 100%;
}

.fp-center  { justify-content: center; align-items: center; }
.fp-left    { justify-content: flex-start; }
.fp-hcenter { justify-content: center; }
.fp-right   { justify-content: flex-end; }
.fp-top     { align-items: flex-start; }
.fp-vcenter { align-items: center; }
.fp-bottom  { align-items: flex-end; }


/* Flex distributed rows/cols
---------------------------------------*/
.flex-row, .flex-col{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
}
.flex-row {
    flex-direction: row;
    width:100%;
}
.flex-col {
    flex-direction: column;
    height:100%;
}
.flex-cell{
    flex-grow:   1;
    flex-shrink: 1;
    flex-basis:  0; /* auto = size according to content, 0=expadn to fill */
}


/* 12 column grid based layouts
---------------------------------------*/
[class*="col-"] {
    /*padding: 1rem;*/
    padding: calc(0.2300rem * 5) calc(0.2300rem * 5);
    /*border:    2px solid fuchsia;*/
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 calc(0.2300rem * 5);
    align-items: stretch;
    justify-content: space-between;
}

/* Start each col at 0 width, and then grow at the required ratio to fill the remaining space */
.col-1  { flex-grow: 1; flex-shrink: 1; flex-basis:0; }
.col-1_5{ flex-grow:1.5;flex-shrink:1.5;flex-basis:0; }
.col-2  { flex-grow: 2; flex-shrink: 2; flex-basis:0; }
.col-3  { flex-grow: 3; flex-shrink: 3; flex-basis:0; }
.col-4  { flex-grow: 4; flex-shrink: 4; flex-basis:0; }
.col-5  { flex-grow: 5; flex-shrink: 5; flex-basis:0; }
.col-6  { flex-grow: 6; flex-shrink: 6; flex-basis:0; }
.col-7  { flex-grow: 7; flex-shrink: 7; flex-basis:0; }
.col-8  { flex-grow: 8; flex-shrink: 8; flex-basis:0; }
.col-9  { flex-grow: 9; flex-shrink: 9; flex-basis:0; }
.col-10 { flex-grow:10; flex-shrink:10; flex-basis:0; }
.col-11 { flex-grow:11; flex-shrink:11; flex-basis:0; }
.col-12 { flex-grow:12; flex-shrink:12; flex-basis:0; }

/* for mobile-only - Width 3/12 - I.e. Only 3 Parts Wide */
@media (max-width: 599px) {
    .col-1  {min-width: 33.33%;}
    .col-1_5{min-width: 50.00%;}
    .col-2  {min-width: 66.66%;}
    .col-3  {min-width: 100.0%;}
    .col-4  {min-width: 100.0%;}
    .col-5  {min-width: 100.0%;}
    .col-6  {min-width: 100.0%;}
    .col-7  {min-width: 100.0%;}
    .col-8  {min-width: 100.0%;}
    .col-9  {min-width: 100.0%;}
    .col-10 {min-width: 100.0%;}
    .col-11 {min-width: 100.0%;}
    .col-12 {min-width: 100.0%;}
    /*.row    {background:blue;}      /* for debugging */
}

/* for tablet-portrait - Width 6/12  */
@media (min-width: 600px) and (max-width: 899px) {
    .col-1  {min-width: 16.66%;}
    .col-1_5{min-width: 25.00%;}
    .col-2  {min-width: 33.33%;}
    .col-3  {min-width: 50.00%;}
    .col-4  {min-width: 66.66%;}
    .col-5  {min-width: 83.33%;}
    .col-6  {min-width: 100.0%;}
    .col-7  {min-width: 100.0%;}
    .col-8  {min-width: 100.0%;}
    .col-9  {min-width: 100.0%;}
    .col-10 {min-width: 100.0%;}
    .col-11 {min-width: 100.0%;}
    .col-12 {min-width: 100.0%;}
    /*.row    {background:green;}     /* for debugging */
}

/* for tablet-landscape - Width 9/12  */
@media (min-width: 900px) and (max-width: 1199px)  {
    .col-1  {min-width: 11.11%;}
    .col-1_5{min-width: 25.00%;}
    .col-2  {min-width: 22.22%;}
    .col-3  {min-width: 33.33%;}
    .col-4  {min-width: 44.44%;}
    .col-5  {min-width: 55.56%;}
    .col-6  {min-width: 66.67%;}
    .col-7  {min-width: 77.78%;}
    .col-8  {min-width: 88.89%;}
    .col-9  {min-width: 100.0%;}
    .col-10 {min-width: 100.0%;}
    .col-11 {min-width: 100.0%;}
    .col-12 {min-width: 100.0%;}
    /*.row  {background:lime;}      /* for debugging */
}

/* for desktop - Width 12/12  */
@media (min-width: 1200px) {
    .col-1  {min-width:  8.33%;}
    .col-1_5{min-width: 12.50%;}
    .col-2  {min-width: 16.66%;}
    .col-3  {min-width: 25.00%;}
    .col-4  {min-width: 33.33%;}
    .col-5  {min-width: 41.66%;}
    .col-6  {min-width: 50.00%;}
    .col-7  {min-width: 58.33%;}
    .col-8  {min-width: 66.66%;}
    .col-9  {min-width: 75.00%;}
    .col-10 {min-width: 83.33%;}
    .col-11 {min-width: 91.66%;}
    .col-12 {min-width: 100.0%;}
    /*.row    {background:yellow;}        /* for debugging */
}

/* for large desktop - Width 12/12 & Add gutters */
@media (min-width: 1800px) {
    html {                          /* viewport did not work */
        zoom: 0.75;
    }
   /*.row     {background:red;}       /* for debugging */
}


/* HTML and BODY elements
---------------------------------------*/

html {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    /* font-size master control set in html via javascript */
    color: black;
    background: #CCC;
}

body {
    background: white;
    margin: 0 auto;
}

@media (max-width: 599px) {
    body { width: calc(0.2300rem * 110);}
}

@media (min-width: 600px) {
    body { width: calc(0.2300rem * 210);}
}

/* for large desktop - Width 12/12 & Add gutters */
@media (min-width: 1800px) {
   /*body {width: 80%;}*/
}


/* General Text Styles
---------------------------------------*/

/* For Google mobile accessibility requires, clickable items bust be at least 48x48px in size */
a {
    min-height: 50px;
    min-width: 50px;
    padding: 10px;
}

/* For Google mobile accessibility requires, clickable items bust be spaced at least 32px apart */
/*a + a {
    margin-left: 32px;
}*/

h1 {
    font-weight: bold;
    font-size: 1.6em;
    /*color: #00A512;    /* green */
    /*color: #007f0a;    /* dark green */
}

h2 {
    font-weight: bold;
    text-align: center;
    /*color: #00A512;    /* green */
    color: #007f0a;    /* dark green */
}

#about h2 {
    color: black;
}

blockquote {
    font-style: italic;
    text-align: center;
    color:      #777;
}

em {
    font-style: italic;
}

.close {
    margin-top: 0.125em;
}


/* Banner
---------------------------------------*/
#banner {
    position: relative;
    height: 38vw;
    max-height: 20rem;

    background-image: url(images/banner.jpg);   /* if add offsets, changes scaling */
    background-attachment: fixed;
    background-size: 100% auto;
    background-repeat:no-repeat;
    background-position: top center;
}

#banner img {
    width: 60%;
}

@keyframes fade_in_logo {
    0%  { opacity: 0; }
    100%{ opacity: 1; }
}
#banner img {
    /*animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
    animation:  fade_in_logo 1s ease-in 0s 1;
}


/* Services Icons
---------------------------------------*/
/* For Google mobile accessibility requires, clickable items bust be spaced at least 32px apart */
#services div {
    padding: calc(0.2300rem * 5);
}

#services a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

#services span {
    margin: 0 -1rem;
    padding: 0;
}

#services img {
    height: calc(0.2300rem * 15);
    margin-bottom: calc(0.2300rem * 2.5);
    margin-top: calc(0.2300rem * -0.5);
}
#services a:hover {
    /*background: #EEE; /* gray */
    color: #00A512;
}

#services span {
    display: block;
    font-size: 1.2rem;
}

/* Intro
---------------------------------------*/
#intro {
    padding: calc(0.2300rem * 10);
    color: white;
    font-size: 1.5rem;
    position: relative;
    background-image: url(images/nanocube-pattern.svg);
    background-attachment: fixed;
    background-repeat: repeat;
    background-size: 20% auto;
    background-color: #222  ;
}

#our_focus {
    font-weight: bold;
    font-size: 1.2em;
}

/*=======================================
    PCB Style Profile
=======================================*/

#profile1 {
    position: relative;
    /*overflow: visible;*/
}

.profile1.desktop_bg, .profile1.mobile {
    position: relative;
    width: 100%;
}

.profile1.desktop_fg {
    Position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#key_services {
    position: absolute;
    text-align: center;
}

.sub-pcb {
    padding: calc(0.2300rem * 2.5) calc(0.2300rem * 5);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#profile1_gear1, #profile1_gear2 {
    Position: absolute;
}

.electron {
    position:   absolute;
    width:      calc(0.2300rem * 2);
}

/* Mobile
---------------------------------------*/
@media (max-width: 599px)
{
    .profile1.desktop_fg, .profile1.desktop_bg,
    #electron_about, #electron_automation, #electron_pm, #electron_programming, #electron_electronic {
        display: none;
    }

    .sub-pcb        { width:calc(0.2300rem *  90);}
    .sub-pcb.left   { left: calc(0.2300rem *  10);}
    .sub-pcb.right  { left: calc(0.2300rem *  10);}
    #key_services   { top:  calc(0.2300rem * 142.268); height: calc(0.2300rem * 15.212);}
    #automation     { top:  calc(0.2300rem * 167.427); height: calc(0.2300rem * 89.570);}
    #programming    { top:  calc(0.2300rem * 359.110); height: calc(0.2300rem * 48.160);}
    #about          { top:  calc(0.2300rem *  10.000); height: calc(0.2300rem * 72.433);}
    #pm             { top:  calc(0.2300rem * 266.819); height: calc(0.2300rem * 82.458);}
    #electronic     { top:  calc(0.2300rem * 417.177); height: calc(0.2300rem * 48.110);}
    #profile1_gear1 {
        left:  calc(0.2300rem *  31.662);
        top:   calc(0.2300rem * 207.056);
        width: calc(0.2300rem *  28.868);
    }
    #profile1_gear2 {
        left:  calc(0.2300rem *  53.307);
        top:   calc(0.2300rem * 196.639);
        width: calc(0.2300rem *  21.728);
    }
}

/* Larger than Mobile
---------------------------------------*/
@media (min-width: 600px)
{
    .profile1.mobile {
        display: none;
    }

    .sub-pcb        { width:calc(0.2300rem *  90);}
    .sub-pcb.left   { left: calc(0.2300rem *  10);}
    .sub-pcb.right  { left: calc(0.2300rem * 110);}
    #key_services   { top:  calc(0.2300rem *  60.060); height: calc(0.2300rem * 15.212);}
    #automation     { top:  calc(0.2300rem *  85.270); height: calc(0.2300rem * 89.570);}
    #programming    { top:  calc(0.2300rem * 184.840); height: calc(0.2300rem * 48.160);}
    #about          { top:  calc(0.2300rem *   9.997); height: calc(0.2300rem * 72.433);}
    #pm             { top:  calc(0.2300rem *  92.433); height: calc(0.2300rem * 82.458);}
    #electronic     { top:  calc(0.2300rem * 184.890); height: calc(0.2300rem * 48.110);}
    #profile1_gear1 {
        left:  calc(0.2300rem *  31.662);
        top:   calc(0.2300rem * 124.909);
        width: calc(0.2300rem *  28.868);
    }
    #profile1_gear2 {
        left:  calc(0.2300rem *  53.307);
        top:   calc(0.2300rem * 114.694);
        width: calc(0.2300rem *  21.728);
    }

    /* Animations */
    @keyframes electron_about {
        0%  { transform: translate(0,0); }
        20% { transform: translate(calc(0.2300rem * 34),0); }
        100%{ transform: translate(calc(0.2300rem * 34),0); }
    }
    #electron_about {
        /*animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
        bottom:     calc(0.2300rem * (175.340 + 0));
        left:       calc(0.2300rem * (80 - 1));
        animation:  electron_about 3s linear 1s infinite;
    }

    @keyframes electron_automation {
        0%  { transform: translate(0,0); }
        16% { transform: translate(0,calc(0.2300rem * 15)); }
        100%{ transform: translate(0,calc(0.2300rem * 15)); }
    }
    #electron_automation {
        /*animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
        left:       calc(0.2300rem * (55.000 - 1));
        bottom:     calc(0.2300rem * (170 - 1));
        animation:  electron_automation 2.5s linear 1s infinite;
    }

    @keyframes electron_pm_slide {
        0%  { transform: translate(0, 0); }
        8%  { transform: translate(calc(0.2300rem * 14.984), calc(0.2300rem *  0.000)); } /* 15mm */
        18% { transform: translate(calc(0.2300rem * 29.476), calc(0.2300rem * 14.960)); } /* 20mm */
        40% { transform: translate(calc(0.2300rem * 73.528), calc(0.2300rem * 14.960)); } /* 44mm */
        44% { transform: translate(calc(0.2300rem * 73.528), calc(0.2300rem * 22.952)); } /*  8mm */
        100%{ transform: translate(calc(0.2300rem * 73.528), calc(0.2300rem * 22.952)); } /*  0mm */
    }
    #electron_pm {
        /*animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
        left:       calc(0.2300rem * (81.472 - 1));
        bottom:     calc(0.2300rem * (170.394 - 0));
        animation:  electron_pm_slide 2s linear 0s infinite;
    }

    @keyframes electron_programming_slide {
        0%      { transform: translate(0, 0); }
         1.8%   { transform: translate(calc(0.2300rem *   0.000), calc(0.2300rem *   6.500)); } /*   6.50mm */
         2.8%   { transform: translate(calc(0.2300rem *  -2.732), calc(0.2300rem *   9.280)); } /*   3.90mm */
        12.2%   { transform: translate(calc(0.2300rem * -37.732), calc(0.2300rem *   9.280)); } /*  35.00mm */
        15.0%   { transform: translate(calc(0.2300rem * -45.000), calc(0.2300rem *  16.500)); } /*  10.24mm */
        48.3%   { transform: translate(calc(0.2300rem * -45.000), calc(0.2300rem * 139.920)); } /* 123.42mm */
        52.0%   { transform: translate(calc(0.2300rem * -35.750), calc(0.2300rem * 139.920)); } /*   6.25mm */
        100%    { transform: translate(calc(0.2300rem * -35.750), calc(0.2300rem * 139.920)); } /*   0.00mm */
    }
    #electron_programming {
        /*animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
        left:       calc(0.2300rem * ( 49.750 - 1));
        bottom:     calc(0.2300rem * (171.500 - 0));
        animation:  electron_programming_slide 4s linear 0s infinite;
    }

    @keyframes electron_electronic_slide {
        0%      { transform: translate(0, 0); }
        2.7%    { transform: translate(calc(0.2300rem *   0.000), calc(0.2300rem *   6.500)); } /*  6.63mm */
        4.2%    { transform: translate(calc(0.2300rem *   2.392), calc(0.2300rem *   9.285)); } /*  3.58mm */
        11.3%   { transform: translate(calc(0.2300rem *  19.875), calc(0.2300rem *   9.285)); } /* 17.48mm */
        14.3%   { transform: translate(calc(0.2300rem *  25.000), calc(0.2300rem *  14.551)); } /*  7.35mm */
        52.5%   { transform: translate(calc(0.2300rem *  25.000), calc(0.2300rem * 108.242)); } /* 93.69mm */
        72.9%   { transform: translate(calc(0.2300rem *  75.000), calc(0.2300rem * 108.242)); } /* 50.00mm */
        76.0%   { transform: translate(calc(0.2300rem *  75.000), calc(0.2300rem * 117.500)); } /*  5.15mm */
        100%    { transform: translate(calc(0.2300rem *  75.000), calc(0.2300rem * 117.500)); } /*  0.00mm */
    }
    #electron_electronic {
        /*animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
        left:       calc(0.2300rem * ( 80.000 - 1));
        bottom:     calc(0.2300rem * (171.500 - 0));
        animation:  electron_electronic_slide 3s linear 0s infinite;
    }
}

@keyframes rotate_gear1 {
    0%  { transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}
#profile1_gear1 {
    /*animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
    animation:  rotate_gear1 7.5s linear 0s infinite; /* 12 teeth */
}
@keyframes rotate_gear2 {
    0%  { transform: rotate(0deg); }
    100%{ transform: rotate(-360deg); }
}
#profile1_gear2 {
    /*animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
    animation: rotate_gear2 5s linear 0s infinite; /* 8 teeth */
}

/*=======================================
    Conent below PCB profile style
=======================================*/

/* Frameworks
---------------------------------------*/
#profile1 {
    margin-bottom: calc(0.2300rem * -5);
}

#framework img{
    width: 100%;
    padding: calc(0.2300rem * 5);
    background: #F1F1F1;
}

#framework div {
    /*padding: calc(0.2300rem * 5); Now handled by the flex framework */
}

/* More On Project Management
---------------------------------------*/
.main-more .text-container {
    padding: calc(0.2300rem * 5);
}

.sub-more {
    /* IE does support all 3 paramters for the shorthand flex: */
    border: 0.5ex solid #E5E5E5;
    color: black;
}

.sub-more h1 {
    margin: calc(0.2300rem * 5)
}

.sub-more p {
    margin: calc(0.2300rem * 5) calc(0.2300rem * 5) 0 calc(0.2300rem * 5);
}

#more_pm .sub-more li {
    margin: calc(0.2300rem * 2.5) calc(0.2300rem * 5);
    margin-left: calc(0.2300rem * 12.5);
}

#more_eng .sub-more li {
    margin-left: calc(0.2300rem * 12.5);
}

.sub-more *:last-child {
    margin-bottom: calc(0.2300rem * 5);
}

#more_eng {
    margin-bottom: calc(0.2300rem * 5);
}


/* More Blocks - Gallery
---------------------------------------*/
.sub-gal  {
        padding: calc(0.2300rem * 5);
        align-items: center;
}

.trigger {
    display: flex;
}
/*.fp-center  { justify-content: center; align-items: center; }
.fp-left    { justify-content: flex-start; }
.fp-hcenter { justify-content: center; }
.fp-right   { justify-content: flex-end; }
.fp-top     { align-items: flex-start; }
.fp-vcenter { align-items: center; }
.fp-bottom  { align-items: flex-end; }
    */
@media (max-width: 599px) {
    .sub-gal {
        flex-basis: 100%;
        flex-grow: 1;
        flex-shrink: 1;
    }

    .sub-gal div {
        flex-direction: row;
    }

    .trigger + .trigger { margin-left: calc(0.2300rem * 5);}
    .trigger {
        flex-basis: calc(0.2300rem * 20);
        justify-content: center;
        align-items: center;
    }
    .trigger:first-child {
        justify-content: flex-start;
    }
    .trigger:last-child {
        justify-content: flex-end;
    }

    .sub-gal img {
        max-height: calc(0.2300rem * 20);
        max-width: 100%;
    }
}

@media (min-width: 600px) {
    .sub-gal {
        flex-basis: calc(0.2300rem * 35);
        flex-grow: 0;
        flex-shrink: 0;
    }

    .sub-gal div {
        flex-direction: column;
    }

    .trigger + .trigger { margin-top: calc(0.2300rem * 5);}
    .trigger {
        flex-basis: calc(0.2300rem * 35);
        justify-content: center;
        align-content: center;
    }
    .trigger:first-child {
        justify-content: flex-start;
    }
    .trigger:last-child {
        justify-content: flex-end;
    }

    .sub-gal img {
        max-width: calc(0.2300rem * 35);
        max-height: 100%;
    }
}


.trigger:hover img {
    border: 0.5ex solid white;
    background: white;
    position: fixed;
    max-width: 90vw;
    max-height: 90vh;
    top: 5vmin;
    z-index: 10;
}

.trigger:hover {
    background: #F5F5F5;   /* light gray */
}

.trigger.right:hover img {
    left: 5vmin;
}

.trigger.left:hover img {
    right: 5vmin;
}


/* Auto Insertion Section - Test Fixture Auto Insertion
---------------------------------------*/
#auto_ins_container {
    display: block;             /* set to flex by the class */
    position: relative;
    width: 100%;
    background: black;
    margin-top: calc(0.2300rem * 5);
    margin-bottom: calc(0.2300rem * 5);
    border: 1px solid black;
}

#auto_ins_container img {
    max-width: 100%;
    display: block;
}

@media (min-width: 600px) {
    #auto_ins_container img {
        max-width: calc(0.2300rem * 100); /*calc(0.2300rem * 50);*/
    }
}

#auto_ins_img0 {
    opacity: 0;
}

#auto_ins_img1, #auto_ins_img2, #auto_ins_img3 {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0%);
}

@keyframes auto_ins2_opacity {
0%      { opacity: 0;}
39.500% { opacity: 0;}
41.501% { opacity: 1;}
97.999% { opacity: 1;}
100.00% { opacity: 0;}
}

@keyframes auto_ins3_opacity {
0%      { opacity: 0;}
48.000% { opacity: 0;}
50.001% { opacity: 1;}
89.500% { opacity: 1;}
91.501% { opacity: 0;}
100.00% { opacity: 0;}
}

#auto_ins_img2 {
    animation:  auto_ins2_opacity 3.4s linear 0s infinite;
}
#auto_ins_img3 {
    animation:  auto_ins3_opacity 3.4s linear 0s infinite;
}


/* Ready to Collaborate?
---------------------------------------*/
#collab {
    background: #191919 url(images/nanocube-pattern.svg) repeat fixed 1.75% 3.9%;
    background-size: calc(0.2300rem * 20);
    margin:0;
    width: 100%;
    padding: calc(0.2300rem * 5) calc(0.2300rem * 10);
}

#collab p {
    font-size: 1.2em;
    color: white;
    text-align:left;
    width:50%;
    font-weight: bold;
}

#collab img {
    width: calc(0.2300rem * 15);
}
/*
@keyframes collab_translate {
    0%  { background-position: 0 0; }
    100%{ background-position: calc(0.2300rem * 15) calc(0.2300rem * 15 * 0.86603070502310329408); }
}
#collab {
    / * animation: name duration timing-function delay iteration-count direction fill-mode play-state; * /
    animation:  collab_translate 10s linear 0s infinite; / * 8 teeth * /
}*/


/* Contact Footer
---------------------------------------*/
#contact {
    text-align: center;
    background: #00A512;    /* green */
    width: 100%;
    color: white;
    padding-top: calc(0.2300rem * 5);
    padding-bottom: calc(0.2300rem * 5);
}

#contact div {
    text-align: center;
    padding: calc(0.2300rem * 5);
}

#contact p, #contact img {
   margin: calc(0.2300rem * 2.5);
}

#contact .role {
    color: #00A512;    /* green */
    font-weight: bold;
    background: white;
    padding: 0.25em 0.8em;
    width: auto;
}

#contact img {
    height: 3em;
}


.sm_text {
    padding: 1em;
}
@media (mac-width: 599.9px) {
    .sm_text {
        flex: 1 1 100%;
        width: 100%
    }
}
@media (min-width: 600px)
{
    .sm_text {
        flex: 1 1 1;
        width: 33%;
    }
}