@charset "utf-8";
/* Folha de Estilo referente ao Site da UNIVERSALCS */


body
{
    margin: 0 auto;
    font-size: 100%;
    font-family:Myriad Pro;
}

body a
{
    text-decoration: none;
}

.centro
{
    margin: 0 auto;
    width: 100%;
    max-width: 980px;
    display: block;
}

.centroMenu
{
    margin: 0 auto;
    width: 572px;
    display: block;
}

/*----------------------------------- FONTS ------------------------------------*/

@font-face
{
    font-family:"S";
    src:url("fonts/S.html") format("truetype"),
    url("fonts/S-2.html") format("truetype"),
    url("fonts/S-3.html") format("truetype");
    font-weight:normal;
    font-style:normal;
}


@font-face
{
    font-family:"SP";
    src:url("fonts/SP.html") format("truetype"),
    url("fonts/SP-2.html") format("truetype"),
    url("fonts/SP-3.html") format("truetype");
    font-weight:normal;
    font-style:normal;
}

@font-face
{
    font-family:"UBUNTU-BOLD";
    src:url("fonts/UBUNTU-BOLD.html") format("truetype"),
    url("fonts/UBUNTU-BOLD-2.html") format("truetype"),
    url("fonts/UBUNTU-BOLD-3.html") format("truetype");
    font-weight:normal;
    font-style:normal;
}

@font-face
{
    font-family:"UBUNTU-ITALIC";
    src:url("fonts/UBUNTU-ITALIC.html") format("truetype"),
    url("fonts/UBUNTU-ITALIC-2.html") format("truetype"),
    url("fonts/UBUNTU-ITALIC-3.html") format("truetype");
    font-weight:normal;
    font-style:normal;
}
@font-face
{
    font-family:"UBUNTU-LIGHTITALIC";
    src:url("fonts/UBUNTU-LIGHTITALIC.html") format("truetype"),
    url("fonts/UBUNTU-LIGHTITALIC-2.html") format("truetype"),
    url("fonts/UBUNTU-LIGHTITALIC-3.html") format("truetype");
    font-weight:normal;
    font-style:normal;
}
@font-face
{
    font-family:"UBUNTU-LIGHT";
    src:url("fonts/UBUNTU-LIGHT.html") format("truetype"),
    url("fonts/UBUNTU-LIGHT-2.html") format("truetype"),
    url("fonts/UBUNTU-LIGHT-3.html") format("truetype");
    font-weight:normal;
    font-style:normal;
}
@font-face
{
    font-family:"UBUNTU-REGULAR";
    src:url("fonts/UBUNTU-REGULAR.html") format("truetype"),
    url("fonts/UBUNTU-REGULAR-2.html") format("truetype"),
    url("fonts/UBUNTU-REGULAR-3.html") format("truetype");
    font-weight:normal;
    font-style:normal;
}


::-webkit-input-placeholder {
   color: #333;
}

:-moz-placeholder {
   color: #333;
}

::-moz-placeholder {
   color: #333;  
}

:-ms-input-placeholder {  
   color: #333;  
}
/*---------------------------Classes padrões----------------------------*/

.centro-planos{
    margin: 0 auto;
    display: block;
}


/*----------------------------------Topo--------------------------------------*/

header{
    float: left;
    width: 100%;
    height: 140px;
    position: fixed;
    display: block;
    z-index: 999;
    border-bottom: 2px solid #ccc;
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

.headerBorder{
    border-bottom: 2px solid #1F9B81;
}
        header #logo{
            float: left;
            width: 28.75%;
            max-width: 384px;
            min-width: 200px;
            height: 96px;
            background: url("../imgs/logo.png") no-repeat;
            background-size: 100%;
            margin-top: 21px;
            margin-left: 2%;
            animation: animationLogo 1s;
            -webkit-animation: animationLogo 1s;
            -moz-animation: animationLogo 1s;
        }
        header #login{
            float: right;
            width: 20%;
            height: 59px;
            background: #191919;
            color: white;
            font-family: "LATO-BOLD";
            text-align: center;
            padding-top: 15px;
        }
        
        header #btMenu{
            display: none;
            border: 0;
            cursor: pointer;
        }
        
        header #menu{
            float: right;
            min-width: 650px;
            height: 54px;
            z-index: 1;
            display: block;
            margin-top: 44px;
            animation: animationMenu 1s;
            -webkit-animation: animationMenu 1s;
            -moz-animation: animationMenu 1s;
        }
                    header #menu li{
                        float: right;
                        width: auto;
                        height: 39px;
                        color: black;
                        text-align: center;
                        margin-left: 4%;
                        margin-right: 4%;
                        font: 25px "UBUNTU-REGULAR";
                        padding-top: 10px;
                        padding-left: 2%;
                        padding-right: 2%;
                        cursor: pointer;
                        display: inline-block;
                        color: #111111;
                    }
                    header #menu li.active{
                        background: #17A7D1;
                        color: white;
                    }
                    header #menu li.active:hover{
                        color: #111111 !important;
                    }
                    header #menu li:hover{
                        color: #17A7D1;
                        transition: color 0.4s;
                        -webkit-transition: color 0.4s;
                        -moz-transition: color 0.4s;
                    }


/* /headerMin */
#painel_login{
    float: right;
    right: 0;
    min-height: 150px;
    width: 270px;
    background: #1495BA;
    position: fixed;
    z-index: 9999;
    margin-top: 166px !important;
    border-bottom-left-radius: 6px;
    -moz-border-bottom-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    display: none;
}
    #painel_login #fecharLogin{
        float: right;
        color: white;
        font: 18px;
        margin-top: 10px;
        margin-right: 10px;
        font-family: "UBUNTU-BOLD";
    }
    #painel_login h3{
        float: left;
        width: 100%;
        text-align: center;
        font: 18px "UBUNTU-BOLD";
        text-transform: uppercase;
        margin-bottom: 5%;
        margin-top: 2%;
        color: white;
    }
    #painel_login form{
        float: left;
        width: 100%;
    }
        #painel_login form input{
            float: left;
            width: 180px;
            height: 30px;
            background: white;
            border-radius: 6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            color: #333;
            padding-left: 2%;
            margin-bottom: 2%;
            margin-left: 16.5%;
            border: 0;
            font-size: 12px;
        }
        #painel_login form input#senha{
            margin-bottom: 15px;
        }
        #painel_login form button{
            width: 100px;
            height: 35px;
            background: #111111;
            color: white;
            text-align: center;
            text-transform: uppercase;
            font-family: "UBUNTU-BOLD";
            font-size: 14px;
            border-radius: 6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border: 0;
            cursor: pointer;
            margin: 0 auto;
            display: block;
            margin-top: 30px;
        }

        #painel_login form button:hover{
            color: #000000;
            transition: color .4s;
            -webkit-transition: color .4s;
            -moz-transition: color .4s;
        }
    #painel_login #esqueceuSenha{
        float: left;
        width: 100%;
        text-align: center;
        font: 12px "LATO-REGULAR";
        color: white;
        margin-top: 15px;
        margin-bottom: 25px;
    }

/* headerMin */
.headerMin{
    height: 100px;
    position:fixed;
}
    .headerMin #logo {
        width: 14.75%;
        height: 65px;
    }
    .headerMin #menu {
        margin-top: 23px;
    }
.painel_login_min {
    margin-top: 101px !important;
}

/*----------------------------------/Topo-------------------------------------*/

/*-------------------------------- Slideshow ---------------------------------*/

.cycle-slideshow{
    float: left;
    width: 100%;
    overflow: hidden;
/*    margin-top: 74px;*/
    border-bottom: 2px solid #ccc;
    margin-top: 141px;
}
    .cycle-slideshow img{
        float: left;
        width: 100%;
        cursor: pointer;
    }
        
        .arrow{
            position: absolute;
            width: 33px;
            height: 101px;
            z-index: 102;
            margin-top: 30%;
            display: block;
        }
        #prev-slide{
            float: left;
            width: 32px;
            height: 101px;
            background: url("../imgs/arrows.png") no-repeat;
            background-position: 1px 0;
            margin-left: 1%;
        }
        #next-slide{
            float: right;
            width: 32px;
            height: 101px;
            background: url("../imgs/arrows.png") no-repeat;
            background-position: -46px 0;
            right: 1%;
        }

.slideDown{
    margin-top: 250px !important;
}
/*-------------------------------- /Slideshow --------------------------------*/


/*-------------------------------- Planos ------------------------------------*/

#planos{
    float: left;
    width: 100%;
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}
    .ti-pg{
        float: left;
        width: 100%;
        text-align: center;
        font-family: "UBUNTU-BOLD";
        text-transform: uppercase;
        display: block;
        margin-top: 30px;
        color: #111111;
        margin-bottom: 30px;
        font-size: 50px;
    }
    #planos #boxPlanos{
        float: left;
        width: 100%;
    }
        #planos #boxPlanos a.plano{
            float: left;
            width: 20%;
            min-height: 480px;
            margin: 2.4%;
            animation: animationTopo 1s;
            -webkit-animation: animationTopo 1s;
            -moz-animation: animationTopo 1s;
        }
        
        #planos #boxPlanos a#btBronze{
            background:url('../imgs/planoBronze.png') no-repeat top center;
            background-size: 98%;
        }
        #planos #boxPlanos a#btBronze:hover{
            background-size: 100%;
            transition: background-size .4s;
            -webkit-transition: background-size .4s;
            -moz-transition: background-size .4s;
        }
        #planos #boxPlanos a#btPrata{
            background:url('../imgs/planoPrata.png') no-repeat top center;
            background-size: 98%;
        }
        #planos #boxPlanos a#btPrata:hover{
            background-size: 100%;
            transition: background-size .4s;
            -webkit-transition: background-size .4s;
            -moz-transition: background-size .4s;
        }
        #planos #boxPlanos a#btOuro{
            background:url('../imgs/planoOuro.png') no-repeat top center;
            background-size: 98%;
        }
        #planos #boxPlanos a#btOuro:hover{
            background-size: 100%;
            transition: background-size .4s;
            -webkit-transition: background-size .4s;
            -moz-transition: background-size .4s;
        }
        #planos #boxPlanos a#btNet{
            background:url('../imgs/planoNet.png') no-repeat top center;
            background-size: 98%;
        }
        #planos #boxPlanos a#btNet:hover{
            background-size: 100%;
            transition: background-size .4s;
            -webkit-transition: background-size .4s;
            -moz-transition: background-size .4s;
        }
            
            

/*------------------------------- /Planos ------------------------------------*/

/*-------------------------------- Dúvidas -----------------------------------*/

#duvidas{
    float: left;
    width: 100%;
    min-height: 669px;
    background: url("../imgs/bgDuvidas.jpg") no-repeat #00002B;
    background-size: 100%;
}
    #duvidas #tituloDuvidas{
        float: left;
        color: white;
    }


/*############################### MENU SANFONA ###############################*/

#menu-sanfona
{
    float: left;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 150px;
}
    #menu-sanfona ul
    {
        float: left;
        width: 100%;
    }
        #menu-sanfona ul .rowDuvidas{
            float: left;
            width: 49%;
        }
        #menu-sanfona ul .rowDuvidas:first-child{
            margin-right: 1%;
        }
        #menu-sanfona ul li
        {
            float: left;
            width: 100%;
            min-height: 40px;
            background: none;
            border: 2px solid white;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            margin-bottom: 5px;
            border-bottom-left-radius: 0;
            -moz-border-bottom-left-radius: 0;
            -webkit-border-bottom-left-radius: 0;
            border-top-right-radius: 0;
            -moz-border-top-right-radius: 0;
            -webkit-border-top-right-radius: 0;
        }
            #menu-sanfona ul li h2
            {
                float: left;
                width: 92%;
                text-align: left;
                line-height: 34px;
                font: 20px "UBUNTU-LIGHTITALIC";
                color: white;
                cursor: pointer;
                margin-top: 6px;
                color: white;
                padding-left: 3%;
                display: block;
                z-index: 2;
                position: relative;
                padding-bottom: 2%;
            }
            #menu-sanfona ul li h2 span.title-menu-bold{
                font-family: "LATO-BOLD";
            }
            #menu-sanfona ul li .arrow-menu
            {
                float: right;
                width: 10%;
                max-width: 16px;
                height: 24px;
                background: url("../imgs/iconMenu.png") no-repeat;
                background-size: 100%;
                margin-top: 10px;
                margin-right: 5px;
                display: block;
                z-index: 1;
            }
            .open
            {
                -moz-transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
            }
            #menu-sanfona ul li .conteudo-sanfona
            {
                float: left;
                width: 96%;
                display: none;
                margin: 0 2% 30px 2%;
                padding-top: 15px;
                font: 16px "UBUNTU-REGULAR";
                color: white;
                text-align:left;
                border-top: 1px solid #ccc;
            }

            #menu-sanfona ul li .conteudo-sanfona strong
            {
                font-family: "UBUNTU-REGULAR";
                color: white;
            }

            #menu-sanfona ul li .conteudo-sanfona a
            {
                color: white;
            }
            #menu-sanfona ul li .conteudo-sanfona a:hover
            {
                text-decoration: underline;
            }

/*############################### /MENU SANFONA ##############################*/


/*------------------------------- /Dúvidas -----------------------------------*/

/*################################ FALE CONOSCO ##############################*/

.centroFaleConosco{
    max-width: 500px;
    margin: 0 auto;
    display: block;
}

#fale-conosco{
    float: left;
    width: 100%;
    background: white;
    background-size: 100%;
}

    
    #fale-conosco #form{
        float: left;
        width: 97%;
        margin-top: 10px;
        margin-bottom: 30px;
        margin-left: 1.5%;
        font-family: "UBUNTU-REGULAR";
    }
        #fale-conosco #form input{
            float: left;
            width: 98%;
            height: 40px;
            background: #E9E9E9;
            border-radius: 6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            color: #333;
            padding-left: 2%;
            margin-bottom: 2%;
            border: 0;
        }
        #fale-conosco #form textarea{
            float: left;
            width: 97.5%;
            height: 120px;
            padding-top: 2%;
            background: #E9E9E9;
            border-radius: 6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            color: #333;
            padding-left: 2%;
            margin-bottom: 3%;
            border: 0;
        }
        #fale-conosco #form #recaptcha{
            width: 302px;
            height: 80px;
            margin-top: 10px;
            right: 0;
            left: 0;
            margin: 0 auto;
            display: block;
            overflow: hidden;
            margin-bottom: 10px;
        }
        #fale-conosco #form button{
            float: right;
            width: 160px;
            height: 55px;
            background: #159CC4;
            color: white;
            text-align: center;
            text-transform: uppercase;
            font-family: "UBUNTU-BOLD";
            font-size: 20px;
            border-radius: 6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border: 0;
            cursor: pointer;
            margin-bottom: 15px;
        }
        
        #fale-conosco #form button:hover{
            background: black;
            color: white;
            transition: background .4s;
            -webkit-transition: background .4s;
            -moz-transition: background .4s;
        }
        #fale-conosco #others-contact{
            float: left;
            width: 100%;
            text-align: center;
            color: white;
            font-size: 15px;
            color: #111111
        }
            #fale-conosco center{
                margin: 0 auto;
                display: block;
                width: 170px;
            }
            #fale-conosco #others-contact a{
                float: left;
                text-align: center;
                color: white;
                font-family: "S";
                font-size: 70px;
                color: #111111
            }
            #fale-conosco #others-contact a:last-child{            
                font-family: "SP";
            }
            #fale-conosco #others-contact a:hover{
                color: #159CC4;
                -moz-transition: color .4s;
                -webkit-transition: color .4s;
                transition: color .4s;
            }
        

/*############################### /FALE CONOSCO ##############################*/

/*################################### RODAPE #################################*/

footer{
    float: left;
    width: 100%;
    height: 284px;
    background: #DDDDDD;
}
    footer .boxFooter{
        float: left;
        width: 240px;
        margin-top: 86px;
        margin-left: 7%;
    }
        footer #logoRodape{
            float: left;
            width: 240px;
        }
        footer small#copy{
            float: left;
            width: 240px;
            margin-top: 10px;
            font: 13px "UBUNTU-LIGHT";
            text-align: left;

        }
        
    
    footer #news-letter{
        float: left;
        width: 30%;
        min-width: 240px;
        margin-top: 67px;
        /*margin-left: 12%;*/
    }
        footer #news-letter h3{
            float: left;
            width: 99%;
            font: 14px "UBUNTU-BOLD";
            padding-left: 1%;
            color: #159CC4;
            /*font-style: italic;*/
            margin-bottom: 5px;
        }
        footer #news-letter form{
            float: left;
            width: 240px;
        }
            footer #news-letter form input{
                float: left;
                width: 97%;
                height: 40px;
                background: #F3F3F3;
                border-radius: 6px;
                -moz-border-radius: 6px;
                -webkit-border-radius: 6px;
                color: #333;
                padding-left: 2%;
                margin-bottom: 1%;
                border: 1px solid #ccc;
                font: 13px "UBUNTU-REGULAR";
            }
            footer #news-letter form button{
                float:right;
                width: 40%;
                /*min-width: 150px;*/
                height: 35px;
                background: #159CC4;
                color: white;
                text-align: center;
                text-transform: uppercase;
                font-family: "UBUNTU-BOLD";
                font-size: 12px;
                border-radius: 6px;
                -moz-border-radius: 6px;
                -webkit-border-radius: 6px;
                border: 0;
                cursor: pointer;
                margin-left: 31.5%;
                margin-top: 10px;
                margin-bottom: 35px;
            }

            footer #news-letter form button:hover{
                background: #111111;
                color: #159CC4;
                transition: background .4s;
                -webkit-transition: background .4s;
                -moz-transition: background .4s;
            }
            
    .fb-like-box, .fb-like-box span, .fb-like-box.fb_iframe_widget span iframe {
        width: 100% !important;
    }
    footer #box-facebook{
        float: right;
        width: 30%;
        /*max-width: 250px;*/
        height: 231px;
        overflow: hidden;
        border-bottom: 1px solid #ccc;
        margin-top: 20px;
    }
    
    footer #formas_pag{
        float: left;
        width: 30%;
        margin-top: 47px;
        margin-left: 4.5%;
    }
        footer #formas_pag img{
            width: 100%;
            margin: 0 auto;
            display: block;
            border: 1px solid #ccc;
            border-radius: 6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
        }    
    footer #copyright{
        float: left;
        width: 100%;
        height: 60px;
        margin-top: 20px;
        background: #F3F3F3;
    }
        #copyright small#copy{
            float: left;
            width: 98%;
            color: #666;
            font: 13px "LATO-REGULAR";
            margin-top: 18px;
            margin-left: 2%;
        }
            #copyright small#copy #horario{
                font: 11px "LATO-REGULAR";
                display: block;
                width: 98%;
            }
     #formas_pag{
        float: left;
        width: 100%;
        background: white;
    }
        #formas_pag img{
            margin: 0 auto;
            margin-top: 10px;
            display: block;
            width: 417px;
        }
        

/*################################## /RODAPE #################################*/



/*################################## MODAIS #################################*/

.modal{
    float: left;
    width: 80%;
    min-height: 400px;
    max-width: 600px;
    margin-left: 10%;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    display: none;
}
    .modal figure{
        float: left;
        width: 100%;
        margin: 0;
    }
        .modal figure img{
            margin: 0 auto;
            display: block;
            width: 125px;
        }
    .modal form{
        float: left;
        width: 100%;
        margin-top: 10px;
    }
        .modal form select{
            float: left;
            width: 100.5%;
            height: 30px;
            background: white;
            border-radius: 6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            color: #333;
            padding-left: 2%;
            margin-bottom: 2%;
            border: 1px solid #cccccc;
            font-size: 14px;
        }
        .modal form input{
            float: left;
            width: 98%;
            height: 30px;
            background: white;
            border-radius: 6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            color: #333;
            padding-left: 2%;
            margin-bottom: 2%;
            border: 1px solid #cccccc;
            font-size: 14px;
        }
        .modal form input#senha{
            margin-bottom: 15px;
        }
        .modal form button{
            width: 100px;
            height: 35px;
            background: #1F9B81;
            color: white;
            text-align: center;
            text-transform: uppercase;
            font-family: "UBUNTU-BOLD";
            font-size: 14px;
            border-radius: 6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border: 0;
            cursor: pointer;
            margin: 0 auto;
            display: block;
            margin-top: 30px;
            margin-top: 20px;
        }

        .modal form button:hover{
            filter: alpha(opacity=70);
            -moz-opacity: 0.7;
            -khtml-opacity: 0.7;
            opacity: 0.7;
            transition: opacity .4s;
            -webkit-transition: opacity .4s;
            -moz-transition: opacity .4s;
        }
        #btPlano1{
            background: #159CC4;
            color: white;
        }
        #btPlano2{
            background: #159CC4;
            color: white;
        }
        #btPlano3{
            background: #159CC4;
            color: white;
        }
        #btPlano4{
            background: #159CC4;
            color: white;
        }
/*################################## /MODAIS #################################*/



 
@keyframes animationMenu
{
   from
   {
        opacity:0;
        -moz-opacity: 0;
        filter: alpha(opacity=0);
        margin-top:-100px;
   }
   to
   {
        opacity:1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        margin-top:44px;
   }
}


 
@-webkit-keyframes animationMenu
{
   from
   {
        opacity:0;
        -moz-opacity: 0;
        filter: alpha(opacity=0);
        margin-top:-100px;
   }
   to
   {
        opacity:1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        margin-top:44px;
   }
}



@keyframes animationLogo
{
   from
   {
        opacity:0;
        -moz-opacity: 0;
        filter: alpha(opacity=0);
        margin-top:-100px;
   }
   to
   {
        opacity:1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        margin-top:21px;
   }
}


 
@-webkit-keyframes animationLogo
{
   from
   {
        opacity:0;
        -moz-opacity: 0;
        filter: alpha(opacity=0);
        margin-top:-100px;
   }
   to
   {
        opacity:1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        margin-top:21px;
   }
}

@-webkit-keyframes animationTopo
{
   from
   {
        opacity:0;
        -moz-opacity: 0;
        filter: alpha(opacity=0);
        margin-top:-4%;
   }
   to
   {
        opacity:1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        margin-top:2.4%;
   }
}

@keyframes animationTopo
{
   from
   {
        opacity:0;
        -moz-opacity: 0;
        filter: alpha(opacity=0);
        margin-top:-4%;
   }
   to
   {
        opacity:1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        margin-top:2.4%;
   }
}