/* CORPO */

body {
    font-family: Arial, san-serif;
    color: #1c1c1c;
}

body li {
     font-size: 20px; 
}

h1, h2, h3 {
     font-family: Arial, san-serif;
    color: #000000;
}

.botao {
      color: #ffffff;
      text-decoration: none;
      padding: 10px 30px;
      background-color: #313ee9;
      font-size: .9em;
      border-radius: 3px;
}

/* Navegação */

nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #313ee9;
}

nav > a {
        
         text-decoration: nome;
         color: #ffffff;
         font-weight: 800;
         font-size: 32px;
         font-family: Arial, san-serif;
}

nav ul {
       
       display: flex;
	   flex-direction: column;
	   align-items: center;
	   list-style: nome;
	   padding: 0;
	   width: 100%;
}

nav ul li {
     display: inline-block;
	   text-align: center;
	   width: 100%;
}

nav ul li a {

	     display: inline-block; 
	  padding: 10px 0;
	  width: 100%;
	  text-decoration: none;
	  color: #ffffff;
}

/* Cabeçalho */

header {

        display: flex;
	   flex-direction: column;
	   align-items: center;
	   border-image: url("../img/precos.jpg");
	   background-size: cover;
	   background-repeat: no-repeat;
	   background-position: center;
	   color: #060606;
	   text-align: center;
	   padding: 20px;
}

header h1{

	color: #060606;
}

header p{
	margin-bottom: 2em;


}

#sobre {
         display: flex;
	    flex-direction: column;
	    align-items: center;
	    align-items: center;
	    text-align: center;
	    padding: 10px 10px 20px 20px;
	    background-color: #ffffff; 
	    color: #030303;
}

#sobre h2 {

	color: #030303;
}

#sobre p {
	margin-bottom: 2.5em;
	max-width: 1000&
}

#sobre .botao {

	background-color: #313ee9;
	color: #ffffff;
}

/* Hospedagem */

#hospedagem {
            display: flex;
	       flex-direction: column;
	       align-items: center;
	       padding: 30px;
}

#hospedagem div {
           display: flex;
	       flex-direction: column;
	       align-items: center;
	       text-align: center;
	       margin-top: 30px;
}

/* Clientes */

#clientes {
           display: flex;
	       flex-direction: column;
	       align-items: center;
	       padding-top: 20px;
}

#clientes h2 {
           margin-bottom:  20px;

}

#clientes img {
           
           width: 100%;
}

/* Contato */

#contato {

         display: flex;
	     flex-direction: column;
	     align-items: center;
	     text-align: center;
	     padding: 20px;
}

#contato h2 {

         color: #000000;
}

/* Rodape */

footer {
        text-align: center;
        padding: 10px;
        background-color: #313ee9;
        color: #ffffff;
}

footer a {
        text-decoration: none;
        color: #00ffff;
}

@media screen and (min-width: 768px) {

    /*nav*/

    nav {
            flex-direction: row;
            justify-content: space-around;
    }

    nav ul {

    	   flex-direction: row;
    	   width: 70%;
    } 

    /*Cabeçalho*/ 

    header {
    	    height: 600px;
    	    height: 60vh;
    	    justify-content: center;
    }

    /*Sobre*/

    #sobre {
    	     height:  250px;
    	     height: 30vh;
    	     justify-content: center;
    	     min-height: 250px;
    }

    /*Hospedagem*/

    #hospedagem {
    	    flex-direction: row;
    	    flex-wrap: wrap;
    	    align-items: flex-start;
    	    max-width: 1000px;
    	    margin: 0 auto;
    }

    #hospedagem h2 {
            text-align: center;
            width: 100%;     
    }

    #hospedagem	div {
            flex-grow: 1;
            flex-basis: 150px;
            padding: 0 10px;
    }

    /*Clientes*/

    #clientes {
    	    flex-direction: row;
    	    flex-wrap: wrap;
    }

    #clientes h2 {
    	    width: 100%;
    	    text-align: center;
    }

    #clientes img {
    	    width: 33.3333333%;

    }

    /*Contato*/

    #contato {
    	    flex-direction: row;
    	    flex-wrap: wrap;
    	    justify-content: space-around;
    	    max-width: 500px;
    	    margin: 0 auto;
    }

    #contato h2, #contato p {

    	    width: 100;

    }
}