.socmed > a
{
   background-repeat: no-repeat;
   background-size: contain;
   /* border: .125em solid #3fa7d8; */
}

.em { background-image: url("../pix/logo-mail.svg"); }
.fb { background-image: url("../pix/logo-fb.svg"); }
.tw { background-image: url("../pix/logo-tw.svg"); }

   /* co-ordinate changes here with translations.css .flags-wrapper values */
#content > .socmed
{
   float: right;
   font-size: .75em;
   margin-top:   .5em;
   margin-right: -7.5em;
}

#content > .socmed > a
{
   display: inline-block;
   width:  1.7em;
   height: 1.7em;
}

#content > .socmed > a:first-child
{
   margin-right: -0.7em;
}

#menu .socmed,
#menu .socmed:hover
{
   background-color: transparent;
   box-shadow: none;
   color: transparent;
   font-family: inherit;
   font-weight: normal;
   list-style-type: none;
   text-align: left;
   -webkit-transition-property: none;
      -moz-transition-property: none;
       -ms-transition-property: none;
        -o-transition-property: none;
           transition-property: none;
}

#menu .socmed
{
   display: none;
   margin-bottom: 0;
   position: absolute;
   bottom: .5em;
   right: -25%;
   width: 3em;
}

#menu .socmed > a
{
   float: left;
   width: 3em;
   height: 3em;
}

#menu .socmed > a:first-child
{
   margin-bottom: .5em;
}

@media screen and (min-width: 768px) and (max-width: 800px) and (orientation: portrait),
                  (min-height: 480px) and (min-width: 800px) and (orientation: landscape)
{
   #content > .socmed
   {
      font-size: 1em;
      margin-right: -6em;
   }
}

@media screen and (max-width: 767px)
{
   .socmed
   {
      margin-right: 0;
   }

   .socmed > a
   {
      border-width: .15em;
   }

   #content > .socmed
   {
      display: none;
   }

   #menu .socmed,
   #menu .socmed:hover
   {
      display: block;
   }
}

   /* 2 col menu */
@media screen and (max-height: 430px) and (orientation: landscape)
{
   #menu .socmed
   {
      right: -17.5%;
      width: 3em !important;
   }
}