/* main container */
.blog-container{
	top:0px;
	background:transparent;
	width:100%;
	height:405px;
	position:absolute;
	left:0%;
}

.loader {
    text-align: center;
}
.loader i {
    display: inline-block;
	  margin: -280px 40px 54px -34px;    
    -webkit-animation: loader 10s infinite  linear;
    -moz-animation: loader 10s infinite  linear;
}
.loader i:nth-child(5n+5) {
    
    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
}
.loader i:nth-child(3n+2) {

    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}
.loader i:nth-child(2n+5) {

    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
}

.loader i:nth-child(3n+10) {

    -webkit-animation-delay: 2.7s;
    -moz-animation-delay: 2.7s;
}
.loader i:nth-child(7n+2) {

    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
}
.loader i:nth-child(4n+5) {

    -webkit-animation-delay: 5.5s;
    -moz-animation-delay: 5.5s;
}
.loader i:nth-child(3n+7) {

    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
}

@-webkit-keyframes loader {
  0% {
    width: 80px;
    height: 80px;
    opacity: 1;

	-webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    width: 80px;
    height: 80px;
    opacity: 1;

	-webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    width: 80px;
    height: 80px;
    opacity: 0;

	-webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}

@-moz-keyframes loader {
  0% {
    width: 80px;
    height: 80px;
    opacity: 1;
    
	-webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    width: 80px;
    height: 80px;
    opacity: 1;
   
	-webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    width: 80px;
    height: 80px;
    opacity: 0;
    
	-webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}

.card-flyer{
    background: #FFFFFF;
    margin-top: 50px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.40);
  }

.card-flyer:hover i{
    color: #008d1f;
    opacity: 0.7;
    -webkit-transform:scale(1.15);
    -moz-transform:scale(1.15);
    -ms-transform:scale(1.15);
    -o-transform:scale(1.15);
    transform:scale(1.15);
  }

  .card-flyer:hover{
    background: #fff;
    box-shadow: 0px 15px 26px rgba(0, 0, 0, 0.50);
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    margin-top: 50px;
  }

.plano:hover {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;
    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
  }
  
  @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

.img-transition {
    opacity: 0;
    animation-timing-function: ease-in-out;
    animation:  banner-img-transition 15s .5s cubic-bezier(0.375, 0.150, 0.690, 1.650);
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes banner-img-transition {
    0% {transform: translateX(500px);
        overflow: hidden;
        opacity: 0;
        content: url("../img/professora.png");
        top: 16%;left: 0;height: 85%;
    }
    10% {
        transform: translateX(0);
        opacity: 1;
        overflow: hidden;
        }
    40% {
        transform: translateX(0);
        opacity: 1;
        overflow: hidden;
        }
    49.9% {
        transform: translateX(500px);
        overflow: hidden;
        opacity: 0;
        content: url("../img/professora.png");
        top: 16%;left: 0;height: 85%;
        }
    50% {
        transform: translateX(500px);
        overflow: hidden;
        opacity: 0;
        content: url("../img/aluno.png");
        top: -9%;
        left: 15%;
        height: 109%;
        }
    60% {
        transform: translateX(0);
        opacity: 1;
        overflow: hidden;
        }
    90% {
        transform: translateX(0);
        opacity: 1;
        overflow: hidden;
        }
    100% {
        top: -9%;
        left: 15%;
        height: 109%;
        transform: translateX(500px);
        overflow: hidden;
        opacity: 0;
        content: url("../img/aluno.png");
        }
}

.bg-transition {
    opacity: 0;
    animation:  banner-bg-transition 15s .5s cubic-bezier(0.375, 0.150, 0.690, 1.650);
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes banner-bg-transition {
    0% {
        overflow: hidden;
        opacity: 0;
        content: url("../img/bg_banner_1.png");
    }
    3% {
        overflow: hidden;
        opacity: 1;
        content: url("../img/bg_banner_1.png");
    }
    46% {
        opacity: 1;
        overflow: hidden;
        }
    49% {
        overflow: hidden;
        opacity: 0;
        content: url("../img/bg_banner_1.png");
        }
    50% {
        overflow: hidden;
        opacity: 0;
        content: url("../img/bg_banner_2.png");
        }
    53% {
        opacity: 1;
        overflow: hidden;
        }
    97% {
        opacity: 1;
        overflow: hidden;
        }
    100% {
        overflow: hidden;
        opacity: 0;
        content: url("../img/bg_banner_2.png");
        }
}

.circle-transition {
    overflow: hidden;
    animation-duration: 15s;
    animation-delay: .5s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.38, 0.15, 0, 1.51);
    animation-name:circle-transition;
    animation-iteration-count: infinite;
}

@keyframes circle-transition {
    0% {transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        content: url("../img/circle.png");
        opacity: 0;
    }
    9% {transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        opacity: 1;
    }
    35% {transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        content: url("../img/circle.png");
        opacity: 1;
    }
    49% {content: url("../img/circle.png");
        opacity: 0;
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);

    }
    50% {content: url("../img/aprovado_circle.png");
        opacity: 0; 
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    64% {
        opacity: 1;
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    90% {transform: rotate(720deg);
        -webkit-transform: rotate(720deg);
        opacity: 1;
    }
    95% {
        transform: rotate(720deg);
        -webkit-transform: rotate(720deg);
        opacity: 0;
        content: url("../img/aprovado_circle.png");
    }
    96% {
        opacity: 0;
        transform: rotate(720deg);
        -webkit-transform: rotate(720deg);
        content: url("../img/circle.png");
    }
    100% {
        transform: rotate(720deg);
        -webkit-transform: rotate(720deg);
        content: url("../img/circle.png");
        opacity: 1;
    }
}
/* 
.name-transition-1 {
    opacity: 0;
    animation-name: show, hide;
    animation-duration: 1s, 1s;
    animation-delay: 0s, 6.75s;
    animation-fill-mode: forwards;
}

.name-transition-2 {
    opacity: 0;
    animation-name: show, hide;
    animation-duration: 1s, 1s;
    animation-delay: 7.75s, 14.25s;
    animation-fill-mode: forwards;
}
 */

 .name-transition-1 {
    opacity: 0;
    visibility: hidden;
    animation-name: show-hide-delay;
    animation-duration: 15s;
    animation-delay: .5s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

.name-transition-2 {
    opacity: 0;
    visibility: hidden;
    animation-name: show-hide-delay;
    animation-duration: 15s;
    animation-delay: 8s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

@keyframes show-hide-delay {
    0% {
        opacity: 0;
        visibility:hidden;
        transform:scale(.8);
    }
    10% {
        opacity: 1;
        visibility:visible;
        transform:scale(1);
    }
    40% {
        opacity: 1;
        visibility:visible;
        transform:scale(1);
    }
    50% {
        opacity: 0;
        visibility:hidden;
        transform:scale(.8);
    }
}

@keyframes hide {
    from {
        opacity: 1;
        transform:scale(1);
    }
    to {
        opacity: 0;
        transform: scale(.8);
    }
}

@keyframes hide-final {
    from {
        opacity: 1;
        transform:scale(1);
    }
    to {
        opacity: 0;
        transform: scale(.8);
    }
}

.show-up {
    opacity: 0;
    animation: show 1.5s .5s cubic-bezier(0.375, 0.150, 0.690, 1.650);
    animation-fill-mode: forwards;
}

@keyframes show {
    from {
        opacity: 0;
        transform:scale(.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.slide-bar {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.375, 0.150, 0.690, 1.650);
    animation:  slide-right-gone 7.5s .5s;
    animation-iteration-count:infinite;
    animation-timing-function: ease-in-out;
}

@keyframes slide-right-gone {
    0% {transform: translateX(-500px);
        overflow: hidden;
        opacity: 0;}
    20% {
        transform: translateX(0);
        opacity: 1;
        overflow: hidden;
        }
    50% {
        transform: translateX(0);
        opacity: 1;
        overflow: hidden;
        }
    90% {
        transform: translateX(0);
        opacity: 1;
        overflow: hidden;
        }
    100% {
        transform: translateX(500px);
        overflow: hidden;
        opacity: 0;
        }
}

/* @keyframes pre-replace-text  {
    to {
       visibility: hidden;
    }
}


@keyframes replace-text  {
    from {
        visibility: hidden;
        content: "Prof<sup>a</sup>. Mary Ann Saraiva"; 
    }
    to {
        visibility: visible;
        content: "Ariomar Jefferson"; 
    }
}
 */

@keyframes girar {
    0% {transform: rotate(0deg);
        -webkit-transform: rotate(0deg);}
    100% {transform: rotate(1080deg);
        -webkit-transform: rotate(1080deg);}
}

.girar {
    overflow: hidden;
    animation-duration: 6s;
    animation-name:girar;
}

@keyframes girar {
    0% {transform: rotate(0deg);
        -webkit-transform: rotate(0deg);}
    100% {transform: rotate(1080deg);
        -webkit-transform: rotate(1080deg);}
}

.slide-left {
    opacity: 0;
    animation:  slide-left 1s .7s ease-out;
    animation-fill-mode: forwards;
}

@keyframes slide-left {
    0% {transform: translateX(200px);
        overflow: hidden;
        opacity: 0;}
    100% {
        transform: translateX(0);
        opacity: 1;
        overflow: hidden;
        }
}

.slide-left-2 {
    opacity: 0;
    animation:  slide-left-right 14s 13s cubic-bezier(0.375, 0.150, 0.690, 1.650);
    animation-fill-mode: forwards;
}

.slide-right {
    opacity: 0;
    animation:  slide-right-gone 12s .5s cubic-bezier(0.375, 0.150, 0.690, 1.650);
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

.float {
    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
    transform: translatey(0px);
    animation: float 6s ease-in-out infinite;
}

.grow-right {
    opacity: 0;
    transform: scaleX(0);
    animation: .8s .7s ease-out;
    animation-name: grow-right;
    animation-fill-mode: forwards;
    transform-origin: left;
}

.come-up {
    box-shadow: 0.8rem 0.6rem 1rem rgba(0,0,0,0.175);
    -webkit-animation: come-up .8s ease-out;
       -moz-animation: come-up .8s ease-out;
        -ms-animation: come-up .8s ease-out;
         -o-animation: come-up .8s ease-out;
    animation: come-up .8s ease-out;
    animation-fill-mode: both   ;
}

@keyframes come-up {
    0% {box-shadow: 0.8rem 0.6rem 1rem rgba(0,0,0,0.175)}
    100% {box-shadow: 0.8rem 0.6rem 1rem rgba(0,0,0,1.175)}
}

@keyframes grow-right {
    0% {opacity: 1;
        transform: scaleX(0);
        overflow: hidden;
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
        overflow: hidden;
        }
}

@keyframes float {
    0% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
        transform: translateY(0px);
    }

    50% {
        box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
        transform: translateY(-20px);
    }

    100% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
        transform: translatey(0px);
    }
}


@keyframes slide-right {
    0% {transform: translateX(-500px);
        overflow: hidden;
        opacity: 0;}
    100% {
        transform: translateX(0);
        opacity: 1;
        overflow: hidden;
        }
}

@keyframes girar {
    0% {transform: rotate(0deg);
        -webkit-transform: rotate(0deg);}
    100% {transform: rotate(1080deg);
        -webkit-transform: rotate(1080deg);}
}

@keyframes neon {
    from {background-color: white;}
    to {background-color: rgb(255, 0, 0);}
}