@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%
}

.SMap a {
	color: #fff;
	text-decoration: none;
}
.SMap a:hover,
.SMap a:focus {
	color: #ececec;
	text-decoration: underline;
}
.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
}
.SMap{
  background: #001489;
  margin-top: 2px;
  max-width: 951px;
  min-width: 768px;
}

/*  Footer Logos section  */
.footerlogos max-width: 951px;
.footerlogos min-width: 768px;
.footerlogos ul.Logos-row { 
   width: 100%; 
   padding-left: 40px; 
   margin-top: 9px; 
   margin-bottom: 12px; }
.footerlogos ul.Logos-row h4 { 
   border-bottom: 1px solid  rgb(108,119,127); 
   width: 100%; 
   font-family: 'Graphik Web'; 
   font-weight: normal; 
   margin: 0px 0px 9px 0px; 
   padding-bottom: 3px; 
   }
.footerlogos ul.Logos-row li { 
   display: inline; 
   list-style-type: none; 
   margin-right: 20px; 
   }
.footerlogos ul.half-row { max-width: 550px; 
   float: left; 
   }
#spacer	{ width: 20px;float:left; }

/*  Social footer  */
.Social-section	{  
   background-color: #001489; 
   clear: both; width: 100%; 
   border-top: solid 1px light-grey;
   border-bottom: solid 1px light-grey; 
   }
.Social-bottom-section { 
   background-color: #001489; 
   clear: both; }


/*  Menu at the bottom  Fine Tunning JCC 14/3/2018 */
footer.flex-rw  {  padding: 0px 40px;  }
ul.SMap-list-top  {  
   flex: 16.6%;  
   padding-left: 0px; 
   margin-left: 0px;  }
ul.SMap-list-top li ul {  padding-left: 0px;  }
ul.SMap-list-top li h4 {  
   margin-bottom: 8px;  
   padding-bottom: 4px; 
   padding-left: 12px; 
   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-family: "Graphik Web", sans-serif ;
  font-size: 12px;
}
.SMap-list-anchor {
  font-family: "Graphik Web", sans-serif ;
  font-size: 12px;
  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-family: "Graphik Web", sans-serif ;
  font-size: 26px;
  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;
} 

/* iphone 5/SE */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { 
.container {max-width: 568px;
   min-width: 320px;}
    .row-fluid {
   max-width: 568px;
   min-width: 320px;
   margin: 0 auto;
	*
   zoom: 0;}
  .SMap{
  margin-top: 2px;
  max-width: 568px;
  min-width: 320px;
    font-size: 0.8em;}
  ul.SMap-list-top  {  flex: 80%;  padding-left: 0px; margin-left: 0px;  }
  .SMap-bottom-wrapper {font-size: 0.5em;}
}

/* iPhone 6/7/8 (Portrait) ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: Portrait) and (-webkit-device-pixel-ratio: 2) {
  .container {max-width: 667px;
   min-width: 375px;}
    .row-fluid {
   max-width: 667px;
   min-width: 375px;
   margin: 0 auto;
	*
   zoom: 0;}
  .SMap{
  margin-top: 2px;
  max-width: 667px;
  min-width: 375px;
    font-size: 1em;}
  ul.SMap-list-top  {  flex: 35.6%;  padding-left: 0px; margin-left: 0px;  }
  .SMap-bottom-wrapper {font-size: 1em;}
}

/* iPhone 6/7/8 (landscape) ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .container {max-width: 667px;
   min-width: 375px;}
    .row-fluid {
   max-width: 667px;
   min-width: 375px;
   margin: 0 auto;
	*
   zoom: 0;}
  .SMap{
  margin-top: 2px;
  max-width: 667px;
  min-width: 375px;
    font-size: 1em;}
  ul.SMap-list-top  {  flex: 35.6%;  padding-left: 0px; margin-left: 0px;  }
  .SMap-bottom-wrapper {font-size: 1em;}
}

/* iPhone 6+/7+/8+ (Portrait) ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: Portrait) and (-webkit-device-pixel-ratio: 3) {
  .container {max-width: 736px;
   min-width: 416px;}
    .row-fluid {
   max-width: 736px;
   min-width: 414px;
   margin: 0 auto;
	*
   zoom: 0;}
  .SMap{
  margin-top: 2px;
  max-width: 736px;
  min-width: 414px;
    font-size: 1em;}
  ul.SMap-list-top  {  flex: 45%;  padding-left: 0px; margin-left: 0px;  }
  .SMap-bottom-wrapper {font-size: 1em;}
}

/* iPhone 6+/7+/8+ (Portrait) ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: Landscape) and (-webkit-device-pixel-ratio: 3) {
  .container {max-width: 736px;
   min-width: 416px;}
    .row-fluid {
   max-width: 736px;
   min-width: 414px;
   margin: 0 auto;
	*
   zoom: 0;}
  .SMap{
  margin-top: 2px;
  max-width: 736px;
  min-width: 414px;
    font-size: 1em;}
  ul.SMap-list-top  {  flex: 45%;  padding-left: 0px; margin-left: 0px;  }
  .SMap-bottom-wrapper {font-size: 1em;}
}

/* iPhone X (Landscape) ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: Landscape) and (-webkit-device-pixel-ratio: 3) {
  .container {max-width: 812px;
   min-width: 375px;}
    .row-fluid {
   max-width: 812px;
   min-width: 375px;
   margin: 0 auto;
	*
   zoom: 0;}
  .SMap{
  margin-top: 2px;
  max-width: 812px;
  min-width: 375px;
  
    font-size: 1em;}
  ul.SMap-list-top  {  flex: 45%;  padding-left: 0px; margin-left: 0px;  }
  .SMap-bottom-wrapper {font-size: 1em;}
}

/* iPhone X (Portrait) ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: Portrait) and (-webkit-device-pixel-ratio: 3) {
  .container {max-width: 812px;
   min-width: 375px;}
    .row-fluid {
   max-width: 812px;
   min-width: 375px;
   margin: 0 auto;
	*
   zoom: 0;}
  .SMap{
  margin-top: 2px;
  max-width: 812px;
  min-width: 375px;
  
    font-size: 1em;}
  ul.SMap-list-top  {  flex: 45%;  padding-left: 0px; margin-left: 0px;  }
  .SMap-bottom-wrapper {font-size: 1em;}
}

/* Samsung Galaxy S5 (landscape) ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) 
and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
 .container {
   max-width: 640px;
   min-width: 360px;}
    .row-fluid {
   max-width: 640px;
   min-width: 360px;
   margin: 0 auto;
	*
   zoom: 0;}
  .SMap{
  margin-top: 2px;
  max-width: 640px;
  min-width: 360px;
    font-size: 1em;}
  ul.SMap-list-top  {  flex: 35%;  padding-left: 0px; margin-left: 0px;  }
  .SMap-bottom-wrapper {font-size: 1em;}
  #people_search {
  position: relative !important;
  left: 365px !important;
  top: 46px !important;
  z-index: 20;}
}

  
/* Samsung Galaxy S5 (Portrait) Asimetria ressolucions browser/pixel-ratio -----------
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) 
and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
 .container {
   max-width: 640px;
   min-width: 360px;}
    .row-fluid {
   max-width: 640px;
   min-width: 360px;
   margin: 0 auto;
	*
   zoom: 0;}
  .SMap{
  margin-top: 2px;
  max-width: 640px;
  min-width: 360px;
    font-size: 1em;}
  ul.SMap-list-top  {  flex: 35%;  padding-left: 0px; margin-left: 0px;  }
  .SMap-bottom-wrapper {font-size: 1em;}
  #people_search {
  position: relative !important;
  right: 24px !important;
  top: 36px !important;
  z-index: 20;}
} */

/* Android based Full HD display(landscape) ----------- */
/*  Commented out as it creates an artifact on some resolutions
@media screen and (max-width: 1920px)
and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
  .container {
   max-width: 640px;
   min-width: 360px;}
    .row-fluid {
   max-width: 640px;
   min-width: 360px;
   margin: 0 auto;
	*
   zoom: 0;}
  .SMap{
  margin-top: 2px;
  max-width: 640px;
  min-width: 360px;
    font-size: 1em;}
  ul.SMap-list-top  {  flex: 35%;  padding-left: 0px; margin-left: 0px;  }
  .SMap-bottom-wrapper {font-size: 1em;}
  #people_search {
  position: relative !important;
  left: 365px !important;
  top: 46px !important;
  z-index: 20;}
}
*/
/* Android based Full HD display(landscape) ----------- */
/*  Commented out as it creates an artifact on some resolutions
@media screen and (max-width: 1920px)
and (orientation: landscape) and (device-aspect-ratio: 1920/1080) {
  .container {
   max-width: 640px;
   min-width: 360px;}
    .row-fluid {
   max-width: 640px;
   min-width: 360px;
   margin: 0 auto;
	*
   zoom: 0;}
  .SMap{
  margin-top: 2px;
  max-width: 640px;
  min-width: 360px;
    font-size: 1em;}
  ul.SMap-list-top  {  flex: 35%;  padding-left: 0px; margin-left: 0px;  }
  .SMap-bottom-wrapper {font-size: 1em;}
  #people_search {
  position: relative !important;
  left: 365px !important;
  top: 46px !important;
  z-index: 20;}
}
*/

@media only screen and (max-width: 768px) {
  .container {
   max-width: 640px;
   min-width: 360px;}
    .row-fluid {
   max-width: 640px;
   min-width: 360px;
   margin: 0 auto;
	*
   zoom: 0;}
  .SMap{
  margin-top: 2px;
  max-width: 640px;
  min-width: 360px;
    font-size: 1em;}
  ul.SMap-list-top  {  flex: 35%;  padding-left: 0px; margin-left: 0px;  }
  .SMap-bottom-wrapper {font-size: 1em;}
  #people_search {
  position: relative !important;
  left: 365px !important;
  top: 46px !important;
  z-index: 20;}

}
@media only screen and (max-width: 568px) {
  main {
    font-size: 0.9em
  }
  .SMap-list-top {
    width: 100%
  }
  .SMap-list-header {
    font-size: 2em;
  }
  .SMap-list-anchor {
    font-size: 1.5em
  }
  .SMap-social-section {
    justify-content: center
  }
  .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: 100%;
    padding: 0
  }
  .SMap-social-overlap > a:not(:first-child) {
    margin-left: 20px;
  }
  .SMap-bottom-section {
    padding: 0 5px 10px 5px
  }
  .SMap-bottom-wrapper {
    text-align: center;
    width: 100%;
    margin-top: 10px
  }
}
@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
  }
}
@media only screen and (max-width: 320px) {
  .SMap-list-header {
    font-size: 2.2em
  }
  .SMap-list-anchor {
    font-size: 1.2em
  }
  .SMap-social-connect {
    font-size: 2.4em
  }
  .SMap-social-overlap > a {
    font-size: 2.24em
  }
  .SMap-bottom-wrapper {
    font-size: 1.3em
  }
}