* {
    margin:  0;
    padding:  0;
    box-sizing: border-box;
}

body {
    background:  #ecf0f1;
    font-family: 'Dosis', sans-serif;
    font-size: 1vw;
    border-top:  8px solid #ffc600; 
    color: #333;
}

.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
}
    @media (min-width: 960px) {
        .container {
            width: 960px;
            padding: 0;
        }
    }

/* estilo do header */
.header {
}
    .logo {
        display: block;
        width: 200px;
        margin: 20px auto;
        margin-top: 28px;
    }   

    .titulo-site {
        width: 100%;
        text-align: center;
        font-size: vw;
        text-transform: uppercase;
        padding: 10px;
    }
        @media (min-width: 768px) {
            .titulo-site {
                font-size: 5vw;
            }
        }

/* estilo do menu */
.nav {
    position: relative;
    display: inline-block;
    font-size: 3vw;
    font-weight: 700;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
    .nav-item {
    	float: center;
    	*display: inline;
    	zoom: 1;
    	list-style: none;
    }

    	.nav-item a{
    		display: block;
    		padding: 15px 20px;
    		text-decoration: none;
    		color: #000;
    		background: #ffc600;
    	}
    	.nav-item: last-child a {
    		border-radius: 0 5px 5px 0; 
    	}

    	.nav-item a:hover {
    		background: #ffab1c;
    	}


/* Menu Responsivo */
@media (min-width: 480px) {
	.nav-item:first-child a {
		border-radius: 5px 0 5px 0;
	}
}

@media (min-height: 768px) {
	.nav {
		font-size: 3vw;
	}
}




#principal {
	margin-top: 30px;
}
	#principal p {
		font-size: 3.5vw;
		margin-top: 20px;
	}

	@media (min-width: 768px) {
		#principal p {
			font-size: 1.6vw;
		}
	}