@font-face {
  font-family: 'Graphik Web';
  src: url('../fonts/Graphik-Regular-Web.eot');
  src: url('../fonts/Graphik-Regular-Web.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Graphik-Regular-Web.woff2') format('woff2'),
       url('../fonts/Graphik-Regular-Web.woff') format('woff');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}
/* ../fonts/ */
.Graphik-Regular-Web {
  font-family: 'Graphik Web';
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}

$primary-light-blue: #ececec;
$primary-line-color: #7faeb0;
* {
  box-sizing: border-box
}
html, footer {
  height: 100%;
  margin-left: -9%;
  margin-right: -9%
}
.SMap {
    font: 12px "Graphik Web", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  /*  margin: 0px; */
    display: flex;
    flex-flow: column nowrap;
    /*This justify-content is essentially unnecessary in Firefox and Chrome due to the flex: 1 1 auto on the main.  However, it's needed to push the footer down on IE11 */
    justify-content: space-between;
}
ul {
  list-style: none
}
a {
  text-decoration: none
}

.generic-anchor {
    color: #ececec;
    &:visited {
        color: $primary-light-blue
    }
    &:hover {
        color: $primary-line-color
    }
}
.flex-rw {
  display: flex;
  flex-flow: row wrap;
}
/*This main is mostly to push the footer to the bottom and for demo purposes.
main */ {
  flex: 1 1 auto; /*For IE11 */
  display: flex;
  align-items: center;
  justify-content: center;
  font: 12px "Graphik Web", sans-serif;
  color: rgb(155,155,155);
  line-height: 1
}
.footerlogos{
  background: #001489;
  margin-top: 0px;
}

.SMap{
  background: #001489;
  margin-top: 0px;
}


/*  Menu at the bottom  JCC */
footer.flex-rw  {  padding: 0px 40px; margin-left:7%; margin-right: 7%; }
ul.SMap-list-top  {  min-width: 16.6%;  padding-left: 0px; }
ul.SMap-list-top li ul {  padding-left: 0px;  }
ul.SMap-list-top li h4 {  margin-bottom: 8px;  padding-bottom: 4px; font-family: "Graphik LC Web"; "Graphik LC Web";} 

.SMap-list-header {
  border-bottom-style: solid; border-bottom-width: medium; border-bottom-color: chocolate; 
}
.SMap-list-header1 {
  border-bottom-style: solid; border-bottom-width: 5px; border-bottom-color: #FFF; 
}
.SMap-list-header2 {
  border-bottom-style: solid; border-bottom-width: 5px; border-bottom-color: #7f8cc4; 
}
.SMap-list-header3 {
  border-bottom-style: solid; border-bottom-width: 5px; border-bottom-color: #E84937; 
}
.SMap-list-header4 {
  border-bottom-style: solid; border-bottom-width: 5px; border-bottom-color: #009D4D; 
}
.SMap-list-header5 {
  border-bottom-style: solid; border-bottom-width: 5px; border-bottom-color: #444; 
}
.SMap-list-header6 {
  border-bottom-style: solid; border-bottom-width: 5px; border-bottom-color: white; 
}
.SMap-list-top > li {
  font: 12px "Graphik Web", sans-serif ;
  text-align: left;
  padding-bottom: 3px

}
.SMap-list-header {
  color: #eeee;
  font: 12px "Graphik Web", sans-serif ;
}
.SMap-list-anchor {
  font: 12px "Graphik Web", sans-serif;
  margin-left: 20px;
}
.SMap-social-section {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.SMap-social-section::after {
  content: "Social Media";
  position: absolute;
  z-index: 1;
  top: 50%;
  float: right;
  border-top: 2px solid #7faeb0;
  width: calc(80% - 20px)
}
.SMap-social-overlap {
  position: relative;
  z-index: 2;
  background: #787878;
  padding: 1px
}
.SMap-social-connect {
  display: flex;
  flex: nowrap;
  align-items: center;
  font: 26px "Graphik Web", sans-serif;
  color: #fff
}
.SMap-social-small {
  font-size: 10px;
  padding: 5px 20px
}
.SMap-social-overlap > a {
  font-size: 36px
}
.SMap-social-overlap > a:not(:first-child) {
  margin-top: 5px
}
.SMap-bottom-section {
  width: 100%;
  padding: 5px;
  border-top: 1px solid rgb(108,119,127);
  margin-top: 5px
}
.SMap-bottom-section > div:first-child {
  margin-right: auto
}
.SMap-bottom-wrapper {
  font-size: 1em;
  color: #fff
}
.SMap-address {
  display: inline;
  font-style: normal
}    
@media only screen and (max-width: 767px) {
  
  .SMap-bottom-wrapper {
    font-size: 1em;
    text-align: center;
    padding-bottom: 3px;
  }
}
@media only screen and (max-width: 568px) {
  main {
    font-size: 0.9em;
  }
  ul.SMap-list-top {min-width: 55%;padding: 0 auto;}
  .SMap-list-top {
    max-width: 45%;
  }
  .SMap-list-header {
    font-size: 2em;
  }
  .SMap-list-anchor {
    font-size: 1.5em
  }
  .SMap-social-section {
    justify-content: left
  }
  .SMap-social-section::after {
    top: 25%
  }
  .SMap-social-connect {
    margin-bottom: 10px;
    padding: 0 10px
  }
  .SMap-social-overlap {
    display: flex;
    justify-content: center;
  }
  .SMap-social-icons-wrapper {
    width: 50%;
    padding: 0
  }
  .SMap-social-overlap > a:not(:first-child) {
    margin-left: 20px;
  }
  .SMap-bottom-section {
    padding: 0 5px 10px 5px
  }
  .SMap-bottom-wrapper {
    font-size: 1em;
    text-align: center;
    padding-bottom: 3px;
  }
}

@media only screen and (max-width: 480px) {
  .SMap-social-overlap > a {
    margin: auto
  }
  .SMap-social-overlap > a:not(:first-child) {
    margin-left: 0;
  }
  .SMap-bottom-rights {
    display: block
  }
  .SMap-bottom-wrapper {
    font-size: 1em;
    text-align: center;
    padding-bottom: 3px;
  }
  
}
@media only screen and (max-width: 320px) {
 
   .footer.flex-rw  {
    padding-bottom: 10% !important; 
    margin-left:1% !important; 
    margin-right: 1%;
    padding-left: 3% !important;
    }
  .SMap-bottom-wrapper {
    font-size: 1em;
    text-align: center;
    padding-bottom: 3px;
    padding-left: 0px !important;
    margin-bottom: 34px;
  }
  .Social-section		{
      margin-right: 1px!important;
      padding-left: 0px !important;
      margin-left: 1% !important;
      margin-bottom: 2%;
      background-color: #001489;
      clear: both;
      width: 100% !important;
      border-top: solid 1px light-grey;
      border-bottom: solid 1px light-grey;
      }
  .Social-bottom-section		{ 
      max-width: 400px;
      margin-bottom: 10%; 
      background-color: #001489; 
      clear: both; }
  div.footerlogos ul.Logos-row	{width: 80%;}
  
}

/* Android based Full HD display(landscape) ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) 
and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {

  .footerlogos
  .footerlogos ul.Logos-row		{ 
  width: 70%; 
  padding-left: 5%; 
  margin-top: 9px; 
  margin-bottom: 12px; }
  .footerlogos ul.Logos-row h4	{ 
  border-bottom: 1px solid  rgb(108,119,127); 
  width:70%; font-family: 'Graphik Web'; 
  font-weight: normal; 
  padding-bottom: 3px; }
  .footerlogos ul.Logos-row li	{ 
  display: inline; 
  list-style-type: none; 
  margin-right: 30px; }
  .footerlogos ul.half-row 		{ 
  max-width: 70%; 
  float: left; 
  padding-left: 3%; }
   #spacer { 
   width: 20px; 
   float:left; }
  
  ul.SMap-list-top  {  min-width: 50%;  padding-left: 0px; }
  
   .Social-section	{
    margin-left: -30%; 
    padding: none; 
    float: left; 
    margin-top: 1px; 
    min-width:110%; }
   .Social-bottom-section { 
     max-width: 360px;
     margin-top: 10px;  }

 
}

  
/* Android based Full HD display(Portrait) ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) 
  and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
    
    .footerlogos
  .footerlogos ul.Logos-row		{ 
  width: 70%; 
  padding-left: 5%; 
  margin-top: 9px; 
  margin-bottom: 12px; }
  .footerlogos ul.Logos-row h4	{ 
  border-bottom: 1px solid  rgb(108,119,127); 
  width:70%; font-family: 'Graphik Web'; 
  font-weight: normal; 
  padding-bottom: 3px; }
  .footerlogos ul.Logos-row li	{ 
  display: inline; 
  list-style-type: none; 
  margin-right: 30px; }
  .footerlogos ul.half-row 		{ 
  max-width: 70%; 
  float: left; 
  padding-left: 3%; }
   #spacer { width: 20px; float:left; }
    
  ul.SMap-list-top  {  min-width: 50%;  padding-left: 0px; }
  
   .Social-section	{
    margin-left: -30%; 
    padding: none; 
    float: left; 
    margin-top: 1px; 
    min-width:110%; }
   .Social-bottom-section { max-width: 360px; margin-top: 10px;  }

    
}