@keyframes nav__fixed {
    from { background: rgba(255,255,255,0) none; color: #fff; box-shadow: 0; }
    to { background: rgba(255,255,255,1) none; color: #333; box-shadow: 0 0 10px rgba(0,0,0,.3); }
}

@-webkit-keyframes nav__fixed {
    from { background: rgba(255,255,255,0) none; color: #fff; box-shadow: 0; }
    to { background: rgba(255,255,255,1) none; color: #333; box-shadow: 0 0 20px rgba(0,0,0,.3); }
}

@keyframes nav__fixed--links {
    from { color: #fff; }
    to { color: #333; }
}

@-webkit-keyframes nav__fixed--links {
    from { color: #fff; }
    to { color: #333; }
}

@keyframes nav__floating {
    from { background: rgba(255,255,255,1) none; color: #333; }
    to { background: rgba(255,255,255,0) none; color: #fff; }
}

@-webkit-keyframes nav__floating {
    from { background: rgba(255,255,255,1) none; color: #333; }
    to { 
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjM5Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjglIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMzgiLz4KICAgIDxzdG9wIG9mZnNldD0iMTQlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMzMiLz4KICAgIDxzdG9wIG9mZnNldD0iMzYlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMTEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz4KICAgIDxzdG9wIG9mZnNldD0iODklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
        background: -moz-linear-gradient(top,  rgba(0,0,0,0.39) 0%, rgba(0,0,0,0.38) 8%, rgba(0,0,0,0.33) 14%, rgba(0,0,0,0.11) 36%, rgba(0,0,0,0.05) 47%, rgba(0,0,0,0) 89%, rgba(0,0,0,0) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.39)), color-stop(8%,rgba(0,0,0,0.38)), color-stop(14%,rgba(0,0,0,0.33)), color-stop(36%,rgba(0,0,0,0.11)), color-stop(47%,rgba(0,0,0,0.05)), color-stop(89%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0)));
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0.39) 0%,rgba(0,0,0,0.38) 8%,rgba(0,0,0,0.33) 14%,rgba(0,0,0,0.11) 36%,rgba(0,0,0,0.05) 47%,rgba(0,0,0,0) 89%,rgba(0,0,0,0) 100%);
        background: -o-linear-gradient(top,  rgba(0,0,0,0.39) 0%,rgba(0,0,0,0.38) 8%,rgba(0,0,0,0.33) 14%,rgba(0,0,0,0.11) 36%,rgba(0,0,0,0.05) 47%,rgba(0,0,0,0) 89%,rgba(0,0,0,0) 100%);
        background: -ms-linear-gradient(top,  rgba(0,0,0,0.39) 0%,rgba(0,0,0,0.38) 8%,rgba(0,0,0,0.33) 14%,rgba(0,0,0,0.11) 36%,rgba(0,0,0,0.05) 47%,rgba(0,0,0,0) 89%,rgba(0,0,0,0) 100%);
        background: linear-gradient(to bottom,  rgba(0,0,0,0.39) 0%,rgba(0,0,0,0.38) 8%,rgba(0,0,0,0.33) 14%,rgba(0,0,0,0.11) 36%,rgba(0,0,0,0.05) 47%,rgba(0,0,0,0) 89%,rgba(0,0,0,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63000000', endColorstr='#00000000',GradientType=0 );
        color: #fff;
     }
}

@keyframes nav__floating--links {
    from { color: #333; }
    to { color: #fff; }
}

@-webkit-keyframes nav__floating--links {
    from { color: #333; }
    to { color: #fff; }
}


@keyframes nav__fixed--logo {
    from { width: 206px; height: 50px; }
    to { width: 146px; height: 36px; }
}

@-webkit-keyframes nav__fixed--logo {
    from { width: 206px; height: 50px; }
    to { width: 146px; height: 36px; }
}

@keyframes nav__floating--logo {
    from { width: 146px; height: 36px; }
    to { width: 206px; height: 50px; }
}

@-webkit-keyframes nav__floating--logo {
    from { width: 206px; height: 50px; }
    to { width: 146px; height: 36px; }
}

@keyframes nav__fixed--logo-azul {
    from { opacity: 0; width: 206px; height: 50px; }
    to { opacity: 1; width: 146px; height: 36px; }
}

@-webkit-keyframes nav__fixed--logo-azul {
    from { opacity: 0; width: 206px; height: 50px; }
    to { opacity: 1; width: 146px; height: 36px; }
}

@keyframes nav__fixed--logo-branco {
    from { opacity: 1; width: 206px; height: 50px; }
    to { opacity: 0; width: 146px; height: 36px; }
}

@-webkit-keyframes nav__fixed--logo-branco {
    from { opacity: 1; width: 206px; height: 50px; }
    to { opacity: 0; width: 146px; height: 36px; }
}

@keyframes nav__fixed--external {
    from { height: 28px; }
    to { height: 0; }
}

@-webkit-keyframes nav__fixed--external {
    from { height: 28px; }
    to { height: 0; }
}

@keyframes nav__floating--logo {
    from { width: 146px; height: 36px; }
    to { width: 206px; height: 50px; }
}

@-webkit-keyframes nav__floating--logo {
    from { width: 146px; height: 36px; }
    to { width: 206px; height: 50px; }
}

@keyframes nav__floating--logo-azul {
    from { opacity: 1; width: 146px; height: 36px; }
    to { opacity: 0; width: 206px; height: 50px; }
}

@-webkit-keyframes nav__floating--logo-azul {
    from { opacity: 1; width: 146px; height: 36px; }
    to { opacity: 0; width: 206px; height: 50px; }
}

@keyframes nav__floating--logo-branco {
    from { opacity: 1; width: 146px; height: 36px; }
    to { opacity: 1; width: 206px; height: 50px; }
}

@-webkit-keyframes nav__floating--logo-branco {
    from { opacity: 1; width: 146px; height: 36px; }
    to { opacity: 1; width: 206px; height: 50px; }
}

@keyframes nav__floating--external {
    from { height: 0; }
    to { height: 28px; }
}

@-webkit-keyframes nav__floating--external {
    from { height: 0; }
    to { height: 28px; }
}

@keyframes nav__fixed--nav__area {
    0% {opacity: 1;}
    55% {opacity: 0; height: 0; }
    100% {opacity: 0; height: 0; padding-top: 0;}
}

@-webkit-keyframes nav__fixed--nav__area {
    0% {opacity: 1;}
    55% {opacity: 0; height: 0; }
    100% {opacity: 0; height: 0; padding-top: 0;}
}

@keyframes nav__floating--nav__area {
    from {opacity: 0;}
    to {opacity: 1;}
}

@-webkit-keyframes nav__floating--nav__area {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes product__item {
    from { box-shadow: 0 0 30px 5px rgba(0,0,0,.0); }
    to { box-shadow: 0 0 30px 5px rgba(0,0,0,.1); }
}

@-webkit-keyframes product__item {
    from { box-shadow: 0 0 30px 5px rgba(0,0,0,.0); }
    to { box-shadow: 0 0 30px 5px rgba(0,0,0,.1); }
}

@keyframes details {
    from { background-color: #fff; color: #666; }
    to { background-color: #666; color: #fff; }
}

@-webkit-keyframes details {
    from { background-color: #fff; color: #666; }
    to { background-color: #666; color: #fff; }
}


@keyframes where {
    from { background-color: #fff; color: #8823e9; }
    to { background-color: #8823e9; color: #fff; }
}

@-webkit-keyframes where {
    from { background-color: #fff; color: #8823e9; background-position: 0%, 0; }
    to { background-color: #8823e9; color: #fff; background-position: 100%, 100px; }
}

@keyframes share__tw {
    from { background-color: #fff; color: #33cbfd; }
    to { background-color: rgba(51,203,253,.7); color: #fff; }
}

@-webkit-keyframes share__tw {
    from { background-color: #fff; color: #33cbfd; }
    to { background-color: rgba(51,203,253,1); color: #fff; }
}

@keyframes share__face {
    from { background-color: #fff; color: #3c5a98; }
    to { background-color: #3c5a98; color: #fff; }
}

@-webkit-keyframes share__face {
    from { background-color: #fff; color: #3c5a98; }
    to { background-color: rgba(60,90,152,1); color: #fff; }
}

@keyframes buy__it {
    from { background-color: #fff; color:#00e0f2; }
    to { background-color:#00e0f2; color: #fff; }
}

@-webkit-keyframes buy__it {
    from { background-color: #fff; color:#00e0f2; }
    to { background-color:rgb(0, 224, 242); color: #fff; }
}


@keyframes comprar_isso {
    from { background-color: #fff; color:#00e0f2; }
    to { background-color:#00e0f2; color: #fff; }
}

@-webkit-keyframes comprar_isso {
    from { background-color: #fff; color:#00e0f2; }
    to { background-color:rgb(0, 224, 242); color: #fff; }
}



@keyframes sac {
    from { background-color: transparent; color: #fff; }
    to { background-color: #fff; color: #ff3366; }
}

@-webkit-keyframes sac {
    from { background-color: transparent; color: #fff; }
    to { background-color: #fff; color: #ff3366; }
}

@keyframes educators {
    from { background-color: transparent; color: #ff3366; }
    to { background-color: #ff3366; color: #fff; }
}

@-webkit-keyframes educators {
    from { background-color: transparent; color: #ff3366; }
    to { background-color: #ff3366; color: #fff; }
}

@keyframes educators-list {
    from { background-color: transparent; color: #ff8e01; }
    to { background-color: #ff8e01; color: #ffffff; }
}

@-webkit-keyframes educators-list {
    from { background-color: transparent; color: #ff8e01; }
    to { background-color: #ff8e01; color: #ffffff; }
}

@keyframes educators-list-blue {
    from { background-color: transparent; color: #2860a9; }
    to { background-color: #2860a9; color: #ffffff; }
}

@-webkit-keyframes educators-list-blue {
    from { background-color: transparent; color: #2860a9; }
    to { background-color: #2860a9; color: #ffffff; }
}

@keyframes brand__bullet {
    from { background-color: #fff; }
    to { background-color: #ff8e01; }
}

@-webkit-keyframes brand__bullet {
    from { background-color: #fff; }
    to { background-color: #ff8e01; }
}

@keyframes brand__name {
    from { color: #666; padding-left: 0; }
    to { color: #ff8e01; padding-left: 4px }
}

@-webkit-keyframes brand__name {
    from { color: #666; padding-left: 0; }
    to { color: #ff8e01; padding-left: 4px }
}

@keyframes brand__name--color {
    from { color: #666; }
    to { color: #ff8e01; }
}

@-webkit-keyframes brand__name--color {
    from { color: #666; }
    to { color: #ff8e01; }
}

@keyframes brand__name--alternate {
    from { color: #ed6d12; padding-left: 0; }
    to { color: #666; padding-left: 4px }
}

@-webkit-keyframes brand__name--alternate {
    from { color: #ed6d12; padding-left: 0; }
    to { color: #666; padding-left: 4px }
}

@keyframes brand__name--alternate-color {
    from { color: #ed6d12; }
    to { color: #666; }
}

@-webkit-keyframes rounded__box {
    from { background-color: transparent; border-radius: 0; }
    to {  background-color: rgba(0,0,0,.25); border-radius: 3px; }
}

@keyframes rounded__box {
    from { background-color: transparent; border-radius: 0; }
    to {  background-color: rgba(0,0,0,.25); border-radius: 3px; }
}

@-webkit-keyframes brand__name--alternate-color {
    from { color: #ed6d12; }
    to { color: #666; }
}

@keyframes notfound--outline {
    from { background-color: transparent; color: #ff8e01; }
    to {  background-color: #ff8e01; color: #fff; }
}

@-webkit-keyframes notfound--outline {
    from { background-color: transparent; color: #ff8e01; }
    to {  background-color: #ff8e01; color: #fff; }
}