#teachers svg{
    width: 70%;
    max-height: 240px;
    max-width: 155px;
    margin: auto;
}

/*------ infographic animatioins ------*/
/*--- mission ---*/
#teachers .gospel{ width: 90%; max-width: 190px;}
#teachers .info-gospel{
    stroke-dasharray: 10;
    animation: dash 2s reverse infinite linear;
}

@keyframes dash {
    to {
        stroke-dashoffset: 100;
    }
}

/*--- coffee --- */
#teachers svg.coffee{
    margin-top: 1rem;
    max-height: 200px;
}
#teachers .coffee-steam path{
    stroke-width: 3.5;
}
#teachers .one{  stroke-dasharray: 35; stroke-dashoffset: 150; animation:  coffee-steam 9s 1s linear forwards infinite}
#teachers .coffee-steam .two{ stroke-dasharray: 35; stroke-dashoffset: 150; animation: coffee-steam 10s 200ms linear forwards infinite}
#teachers .coffee-steam .three{ stroke-dasharray: 35; stroke-dashoffset: 150; animation:  coffee-steam 8.5s 1.9s linear forwards infinite}

@keyframes coffee-steam {
    0% {stroke-dashoffset: 200;opacity:0;}
    20% {opacity: .9;}
    40% {opacity: .2;}
    65% {opacity: 1;}
    90% {opacity: .4;}
    100% {stroke-dashoffset: 0;opacity: 1;}
}

/*--- STOPWATCH collective teaching years --- */
/* --- stopwatch button ---*/
.stopwatch .stopwatch-button{animation: stopwatch-button-press 3s infinite 2s ease-in-out;}

@keyframes stopwatch-button-press{
    0%{
        transform: translateY(0);
        transform-origin: 00 100%;
    }
    8%{
        transform: translateY(3.5%);
        transform-origin: 00 100%;
    }
    15%{
        transform: translateY(0);
        transform-origin: 00 100%;
    }
    100%{
        transform: translateY(0);
        transform-origin: 00 100%;
    }
}
/* --- stopwatch timer seconds -----*/

.stopwatch-seconds{
    animation: stopwatch-seconds 3s infinite 2s ease-out;
    transform-origin: 50% 52.3%;
}

@keyframes stopwatch-seconds{
    0%{}
    15%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

/*--- CHURCH hours serving --- */

#teachers .church-light line{ stroke-width: 3px; stroke-dasharray: 35; stroke-dashoffset: 150; animation:  coffee-steam 12s 1s linear forwards infinite}

/*--- CERTIFICATE  --- */

#teachers .certificate .certificate-badge{
    animation: badge-swing ease-in-out 1.5s;
    animation-iteration-count: infinite;
    transform-origin: 65% 67%;%;
    -webkit-animation: badge-swing ease-in-out 1.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 65% 67%;%;
    -moz-animation: badge-swing ease-in-out 1.5s;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 65% 67%;%;
    -o-animation: badge-swing ease-in-out 1.5s;
    -o-animation-iteration-count: infinite;
    -o-transform-origin: 65% 67%;%;
    -ms-animation: badge-swing ease-in-out 1.5s;
    -ms-animation-iteration-count: infinite;
    -ms-transform-origin: 65% 67%;%;
}

@keyframes badge-swing{
    0% {
        transform:  rotate(31deg) ;
    }
    55% {
        transform:  rotate(-31deg) ;
    }
    100% {
        transform:  rotate(31deg) ;
    }
}

@-moz-keyframes badge-swing{
    0% {
        -moz-transform:  rotate(31deg) ;
    }
    55% {
        -moz-transform:  rotate(-31deg) ;
    }
    100% {
        -moz-transform:  rotate(31deg) ;
    }
}

@-webkit-keyframes badge-swing {
    0% {
        -webkit-transform:  rotate(31deg) ;
    }
    55% {
        -webkit-transform:  rotate(-31deg) ;
    }
    100% {
        -webkit-transform:  rotate(31deg) ;
    }
}

@-o-keyframes badge-swing {
    0% {
        -o-transform:  rotate(31deg) ;
    }
    55% {
        -o-transform:  rotate(-31deg) ;
    }
    100% {
        -o-transform:  rotate(31deg) ;
    }
}

@-ms-keyframes badge-swing {
    0% {
        -ms-transform:  rotate(31deg) ;
    }
    55% {
        -ms-transform:  rotate(-31deg) ;
    }
    100% {
        -ms-transform:  rotate(31deg) ;
    }
}

/*--- LIGHT GLOBE hours serving --- */

#teachers .globe .globe-lights{ stroke-width:0;  fill:#000;  animation:  globe-lights 2s ease-in-out infinite}

@keyframes globe-lights {
    0%{ stroke-width:0;  fill:#000;}
    25%{ fill:#000;}
    40%{stroke-width: 3; fill:#00adee;}
    75%{fill:#000;}
    100%{stroke-width:0; fill:#000;}
}

/*--- THUMB PHONE smarthpone use--- */
#teachers .smartphone .thumb{animation: thumb-move 1s infinite  ease-in-out;}

@keyframes thumb-move{
    0%{
        transform: translateY(6);
        transform-origin: 00 100%;
    }
    40%{
        transform: translateY(-3%);
        transform-origin: 00 100%;
    }
    80%{
        transform: translateY(6);
        transform-origin: 00 100%;
    }
    100%{
        transform: translateY(6);
        transform-origin: 00 100%;
    }
}

/*--- CALENDAR averagetreaching age--- */
svg.calendar{width: 70%;}
.calendar .calendar-page{
    animation: calendar-page-drop linear 3s;
    animation-iteration-count: infinite;
    transform-origin: 0% 0%;
    -webkit-animation: calendar-page-drop linear 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 0% 0%;
    -moz-animation: calendar-page-drop linear 3s;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 0% 0%;
    -o-animation: calendar-page-drop linear 3s;
    -o-animation-iteration-count: infinite;
    -o-transform-origin: 0% 0%;
    -ms-animation: calendar-page-drop linear 3s;
    -ms-animation-iteration-count: infinite;
    -ms-transform-origin: 0% 0%;
}

@keyframes calendar-page-drop{
    0% {
        opacity:1;
        transform:  translate(0px,0px)  rotate(0deg) ;
    }
    11% {
        opacity:1;
        transform:  translate(7px,0px)  rotate(17deg) ;
    }
    25% {
        opacity:1;
        transform:  translate(17px,87px)  rotate(38deg) ;
    }
    46% {
        opacity:1.00;
        transform:  translate(33px,161px)  rotate(70deg) ;
    }
    100% {
        opacity:0;
        transform:  translate(33px,200px)  rotate(70deg) ;
    }
    100% {
        opacity:0;
        transform:  translate(33px,200px)  rotate(70deg) ;
    }
}

@-moz-keyframes calendar-page-drop{
    0% {
        opacity:1;
        -moz-transform:  translate(0px,0px)  rotate(0deg) ;
    }
    11% {
        opacity:1;
        -moz-transform:  translate(7px,0px)  rotate(17deg) ;
    }
    25% {
        opacity:1;
        -moz-transform:  translate(17px,87px)  rotate(38deg) ;
    }
    46% {
        opacity:1.00;
        -moz-transform:  translate(33px,161px)  rotate(70deg) ;
    }
    100% {
        opacity:0;
        -moz-transform:  translate(33px,200px)  rotate(70deg) ;
    }
    100% {
        opacity:0;
        -moz-transform:  translate(33px,200px)  rotate(70deg) ;
    }
}

@-webkit-keyframes calendar-page-drop {
    0% {
        opacity:1;
        -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
    }
    11% {
        opacity:1;
        -webkit-transform:  translate(7px,0px)  rotate(17deg) ;
    }
    25% {
        opacity:1;
        -webkit-transform:  translate(17px,87px)  rotate(38deg) ;
    }
    46% {
        opacity:1.00;
        -webkit-transform:  translate(33px,161px)  rotate(70deg) ;
    }
    100% {
        opacity:0;
        -webkit-transform:  translate(33px,200px)  rotate(70deg) ;
    }
    100% {
        opacity:0;
        -webkit-transform:  translate(33px,200px)  rotate(70deg) ;
    }
}

@-o-keyframes calendar-page-drop {
    0% {
        opacity:1;
        -o-transform:  translate(0px,0px)  rotate(0deg) ;
    }
    11% {
        opacity:1;
        -o-transform:  translate(7px,0px)  rotate(17deg) ;
    }
    25% {
        opacity:1;
        -o-transform:  translate(17px,87px)  rotate(38deg) ;
    }
    46% {
        opacity:1.00;
        -o-transform:  translate(33px,161px)  rotate(70deg) ;
    }
    100% {
        opacity:0;
        -o-transform:  translate(33px,200px)  rotate(70deg) ;
    }
    100% {
        opacity:0;
        -o-transform:  translate(33px,200px)  rotate(70deg) ;
    }
}

@-ms-keyframes calendar-page-drop {
    0% {
        opacity:1;
        -ms-transform:  translate(0px,0px)  rotate(0deg) ;
    }
    11% {
        opacity:1;
        -ms-transform:  translate(7px,0px)  rotate(17deg) ;
    }
    25% {
        opacity:1;
        -ms-transform:  translate(17px,87px)  rotate(38deg) ;
    }
    46% {
        opacity:1.00;
        -ms-transform:  translate(33px,161px)  rotate(70deg) ;
    }
    100% {
        opacity:0;
        -ms-transform:  translate(33px,200px)  rotate(70deg) ;
    }
    100% {
        opacity:0;
        -ms-transform:  translate(33px,200px)  rotate(70deg) ;
    }
}



/*==================== animation end ===================*/