.img-logo { max-height: 250px; max-width: 225px; margin: 0 auto; padding-top: 10px; }
            /* html { font-family: GillSans, Calibri, Trebuchet, sans-serif; }   */
            html {  background-color:#e0e0e0; }
            @media only screen and (min-width: 993px) {
                /* large screens  */
                .nbBackground {
                    width: 100%;
                    height: 60px;                            
                    background: url(../img/backgrounds/large/MyAFSCME-banner.png);
                    background-repeat: repeat-x !important;
                    background-position: center center;  
                    -webkit-background-size: contain;
                    -moz-background-size: contain;
                    -o-background-size: contain;                    
                    background-size: contain !important;
                    background-color: white; 
                }  
                .mbrCardTop {
                    width: 100%;
                    height: 237px;                            
                    background: url(../img/large/membercard_upper.png);                    
                    background-repeat: no-repeat !important;
                    background-position: center center; 
                    -webkit-background-size: contain;
                    -moz-background-size: contain;
                    -o-background-size: contain;                    
                    background-size: contain !important;                    
                }
                .mbrCardBottom {
                    width: 100%;
                    height: 183px;                            
                    background: url(../img/large/membercard_lower.png);                    
                    background-repeat: no-repeat !important;
                    background-position: center center;
                    -webkit-background-size: contain;
                    -moz-background-size: contain;
                    -o-background-size: contain;                    
                    background-size: contain !important;                    
                }
            }
            @media only screen and (min-width: 601px) and (max-width: 992px) {
                /* medium screens */
                .nbBackground {
                    width: 100%;
                    height: 60px !important;                    
                    background: url(../img/backgrounds/medium/MyAFSCME-banner.png);
                    background-repeat: repeat-x !important;
                    background-position: center center;  
                    -webkit-background-size: contain;
                    -moz-background-size: contain;
                    -o-background-size: contain;                    
                    background-size: contain !important;
                    background-color: white; 
                }
                .mbrCardTop {
                    width: 100%;
                    height: 140px;                            
                    background: url(../img/medium/membercard_upper.png);                    
                    background-repeat: no-repeat !important;
                    background-position: center center;  
                    -webkit-background-size: contain;
                    -moz-background-size: contain;
                    -o-background-size: contain;                    
                    background-size: contain !important;
                }
                .mbrCardBottom {
                    width: 100%;
                    height: 108px;                            
                    background: url(../img/medium/membercard_lower.png);                    
                    background-repeat: no-repeat !important;
                    background-position: center center; 
                    -webkit-background-size: contain;
                    -moz-background-size: contain;
                    -o-background-size: contain;                    
                    background-size: contain !important;                    
                }                
            }
            @media only screen and (max-width: 600px) {
                /* small screens */
                .nbBackground {
                    width: 100%;
                    height: 60px !important;                            
                    background: url(../img/backgrounds/small/MyAFSCME-banner.png);
                    background-repeat: repeat-x !important;
                    background-position: center center;  
                    -webkit-background-size: contain;
                    -moz-background-size: contain;
                    -o-background-size: contain;                    
                    background-size: contain;
                    background-color: white;
                }
                .mbrCardTop {
                    width: 100%;
                    height: 92px;                            
                    background: url(../img/small/membercard_upper.png);                    
                    background-repeat: no-repeat !important;
                    background-position: center center;
                    -webkit-background-size: contain;
                    -moz-background-size: contain;
                    -o-background-size: contain;                    
                    background-size: contain !important;                    
                }
                .mbrCardBottom {
                    width: 100%;
                    height: 71px;                            
                    background: url(../img/small/membercard_lower.png);                    
                    background-repeat: no-repeat !important;
                    background-position: center center; 
                    -webkit-background-size: contain;
                    -moz-background-size: contain;
                    -o-background-size: contain;                    
                    background-size: contain !important;                    
                }                
            }          
            body {  
                background-color:#e0e0e0;                
                display: flex; 
                min-height: 100vh; 
                flex-direction: column;
            }
            main { flex: 1 0 auto; } 
            .card { min-height: 500px; overflow: visible; }
            .btnMenu { margin-left: auto; margin-right: auto; 
               box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);          
            }
          .btnMenu:hover {
              box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
          }
          .caption { display: block; font-size: .7em; }
          .nav-fixed {  position: fixed; right: 0; left: 0; top: 0; margin-bottom: 0px; z-index: 998; }
          .feedcontainer {  display: block; margin-bottom: 25px; }
          .feedcontainer h2 { 
              font-weight: bold;
              font-size: 1,5em;
              color: #535353;
              line-height: 1.2em;
              margin-bottom: 8px;
          }
          .feedcontainer h3 { 
              font-weight: bold; 
              font-size: 1.2em; 
              line-height: 1.2em;
              margin-bottom: 7px;
          }
          .bgGradient {
              background: #e8f5e9;
              background: radial-gradient(#00000, #a7ffeb);
          }
         .sideNavMobile {
            /* background-image: url(http://itmakessenseblog.com/files/2011/12/Obama-I-Love-Unions.jpg); */
            background-color: #0B5830;
          }
          .errorStatus {
             color:#ff0000;
             background: none;
          }
         .successStatus {
            color:#0000A0;
            background: none;
         }

         /* tablet main menu */
          .style_prevu_kit
            {
                display:inline-block;
                border:0;
                /*width:196px; */
                /*height:210px; */
                width:99%;
                height:99%;                
                position: relative;
                -webkit-transition: all 200ms ease-in;
                -webkit-transform: scale(1); 
                -ms-transition: all 200ms ease-in;
                -ms-transform: scale(1); 
                -moz-transition: all 200ms ease-in;
                -moz-transform: scale(1);
                transition: all 200ms ease-in;
                transform: scale(1);   

            }
            .style_prevu_kit:hover
            {
                box-shadow: 0px 0px 50px #000000;
                z-index: 2;
                -webkit-transition: all 200ms ease-in;
                -webkit-transform: scale(1);
                -ms-transition: all 200ms ease-in;
                -ms-transform: scale(1);   
                -moz-transition: all 200ms ease-in;
                -moz-transform: scale(1);
                transition: all 200ms ease-in;
                transform: scale(1);
            }
            .flip-container {
              -webkit-perspective: 1000;
              -moz-perspective: 1000;
              -o-perspective: 1000;
              perspective: 1000;
              border: 1px solid #ccc;
            }
            .flip-container:hover .flipper,  
              .flip-container.hover .flipper {
                    -webkit-transform: rotateY(180deg);
                    -moz-transform: rotateY(180deg);
                    -o-transform: rotateY(180deg);
                    transform: rotateY(180deg);
              }
            .flip-container, .front, .back {
                width:196px;
                height:210px;
            }
            .flipper {
                -webkit-transition: 0.6s;
                -webkit-transform-style: preserve-3d;
                -moz-transition: 0.6s;
                -moz-transform-style: preserve-3d;
                -o-transition: 0.6s;
                -o-transform-style: preserve-3d;
                transition: 0.6s;
                transform-style: preserve-3d;
                position: relative;
            }
            .front, .back {
                -webkit-backface-visibility: hidden;
                -moz-backface-visibility: hidden;
                -o-backface-visibility: hidden;
                backface-visibility: hidden;
                position: absolute;
                top: 0;
                left: 0;
            }
            .front {
                /* background: url( /img/michael_emerson.png) 0 0 no-repeat; */ 
                z-index: 2;
            }
            .back {
                -webkit-transform: rotateY(180deg);
                -moz-transform: rotateY(180deg);
                -o-transform: rotateY(180deg);
                transform: rotateY(180deg);
                background: #f8f8f8;
            }
            .front .name {
                font-size: 2em;
                display: inline-block;
                background: rgba(33, 33, 33, 0.9);
                color: #f8f8f8;
                font-family: Courier;
                padding: 5px 10px;
                border-radius: 5px;
                bottom: 60px;
                left: 25%;
                position: absolute;
                text-shadow: 0.1em 0.1em 0.05em #333;
                -webkit-transform: rotate(-20deg);
                -moz-transform: rotate(-20deg);
                -o-transform: rotate(-20deg);
                transform: rotate(-20deg);
            }
            .back-logo {
                position: absolute;
                top: 40px;
                left: 90px;
                width: 160px;
                height: 117px;
                /* background: url(http://demo/logo.png) 0 0 no-repeat; */
            }
            .back-title {
                font-weight: bold;
                color: #00304a;
                position: absolute;
                top: 180px;
                left: 0;
                right: 0;
                text-shadow: 0.1em 0.1em 0.05em #acd7e5;
                font-family: Courier;
                font-size: 2em;
            }
            .back p {
                position: absolute;
                bottom: 40px;
                left: 0;
                right: 0;
                padding: 0 20px;
                font-family: arial;
                line-height: 2em;
            }
            .swiper-container {
                width: 100%;
                height: 100%;
            }
            .swiper-slide {
                /*text-align: center;*/
                /* font-size: 18px;*/
                /* background: #fff; */
                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }   
            
    .iOSiFrameWrapper {
        position: fixed;
        top: 0;
        right:0;
        bottom:0;
        left: 0;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }                 
 
    .affCalendar {
        height: 550px;
        margin: 0 auto;
        font-size: 10px;
    }            
    .fc-header-title h2 {
        font-size: .9em;
        white-space: normal !important;
    }            

    .noUpload {
       background-color: darkslategray; 
    }
    .okUpload {
       background-color: green;     
    }

    .hideLink {
       display: none;
    }

    .displayLink {
       display: block;
    }

    /*  end experimental tablet menu block  */
    @media only screen and (max-width : 601px) {
      .toast { width: 100%; align-content: center; border-radius: 0;}
      #toast-container { min-width: 100%; align-content: center; text-align: center; } 
    }

    /* toast on tablet  */
    @media only screen and (min-width : 601px) and (max-width : 1260px) {
      .toast { width: 100%; align-content: center; border-radius: 0;}
    }

    @media only screen and (min-width : 1261px) {
     .toast { width: 100%; align-content: center; border-radius: 0; }
    }

    @media only screen and (min-width : 601px) and (max-width : 1260px) {
     #toast-container { min-width: 100%; align-content: center; bottom: 0%; top: 90%; right: 0%; left: 0%;}
    }

    @media only screen and (min-width : 1261px) {
     #toast-container { min-width: 100%; align-content: center; bottom: 0%; top: 90%; right: 0%; left: 0%; }
    }