@charset "utf-8";
/* prefixed 100125 */

#folliesLinksIntro {
   grid-area: text-block;
   display: grid;
   grid-template-areas: 
      "links text1 text1";
   grid-column: auto;
   grid-gap: 3%;
   margin: 0 3% 1em 3%;
}

#folliesLinks {
   grid-area: links;
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
   padding: 0;
}

#folliesHeadBar {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   margin: 2em auto 1em auto;
   max-width: 70%;
}

.folliesLinksBar {
   display: flex;
   flex-flow: row;
   justify-content: space-around;
   padding: 0.5em;
   width: 100%;
}

ul.folliesLinksBar {
   border-top: 1px solid #DBE3DF;
   border-bottom: 1px solid #DBE3DF;
   margin: 0 0 0 1em;
}

#folliesLinks li,
.folliesLinksBar li {
   list-style: none;
   text-align: center;
}

.folliesLinksBar li {margin: 0 1em;}

#folliesLinks a, a:visited,
.folliesLinksBar a, a:visited {
   background-image: radial-gradient(#DBE3DF, #B9C9C1);
   border-radius: 24px;
   padding: 6px 12px;
   transition: 0.2s;
   margin: 6px 0;
}

#folliesLinks a:hover,
.folliesLinksBar a:hover {
   background-image: radial-gradient(#224831, #326A48);
   color: whitesmoke;
   text-decoration: none;
}


   @media only screen and (max-width: 1080px){
      .folliesLinksBar li {
         margin: 0 1em;
         font-size: 0.9rem;
      }

      #folliesLinks a, a:visited,
      .folliesLinksBar a, a:visited {
         border-radius: 24px;
         padding: 4px;
         margin: 6px 0;
      }

      #folliesLinks a {
         padding-right: 18px;
         padding-left: 18px;
      }
   }


      @media only screen and (max-width: 900px){
         #folliesLinks {justify-content: space-around;}   

         .folliesLinksBar {
            flex-flow: column;
            justify-content: space-between;
            font-size: 1rem;
         }

         /* controls button margin either side within container */
         ul.folliesLinksBar a {margin: 6px 18%;}
      }


         @media only screen and (max-width: 600px){
                  #folliesLinks {flex-direction: row;}

                  ul.folliesLinksBar {border-radius: 0;}

                  ul.folliesLinksBar a {margin: 4px 0;}
         }