/* (min-width: 450px) and (max-width: 745px) */

/*HEADER---------------------------------------------------------------------*/
@media only screen and (max-width : 640px) {

/*tem que arrumar o menu em mobile porque quando clica não funiona direito (precisa de js)*/

header{
    z-index:10;
    position: absolute;
    background-color:white;
    height:55px;
}

#menu-icon{
    display:inline-block;
    z-index:10;
}

nav ul, nav:active ul {
        z-index:10;
        display: none;
        position: absolute;
        padding: 20px;
        background: #474749;
        min-width:150px;
        right: 20px;
        top: 60px;
        width: 30%;
        border-radius: 4px 0 4px 4px;

    }

    nav li {
        z-index:10;
        text-align: center;
        width: 100%;
        padding: 5px 0;
        margin: 0;

    }

    nav:hover ul {
        z-index:10;
        display: block;

    }
}

/*MAIN IMG---------------------------------------------------------------------*/

.intro-header {
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    color: #f8f8f8;
    background: url(../img/intro-bg5.jpg) no-repeat center center;
    background-size: cover;
}

.intro-message {
    text-align:center;
    width:60%;
    height:65%
}

.intro-message > h1 {
    margin: 0;
    font-weight:700;
    font-size: 2.5em;
}

.intro-message p{
    font-weight:100;
    font-size:18px;
    line-height:150%;
}

.etapas{
    position:relative;
    width:100%;
    height:20%;
    top:0%;
    margin-top:0px;
    text-align:center;

    background-color:#404041;

    box-shadow: 0px -10px 20px rgba(0, 0, 0, 0.5);
}

.etapas-content{
    text-align:center;
    font-size:18px;
    font-weight:100;
    width:90%;
    height:85%;
    line-height:250%;
}

.etapas-content h4{display:inline;line-height:150%;}
.etapas-content a{padding-top:2px;padding-bottom:4px;}
.etapas nav{display:inline-block;}

.footer-right{ /*informações do site*/
    float:right;
}