*{
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;

}


body{
	margin: 0;
}


.navbar{
	display: flex;
	flex-flow:row wrap ;
	height: 100px;
	background: black;
	justify-content: center;
	align-items: center;
	/*position: fixed;
	width: 100%;*/

}


#id{
	position: relative;
	right: 60px;
}

.sobre{
	margin-right: 5%;
}

.sobre p{
	font-size: 20px;
	margin-top: 5%;
}


.logo{
	flex: 20%;
	/*border: 1px solid red;*/
	text-align: left;
	margin-left: 10%;
}

.logo img{
	width: 150px;
}




.menu{
	flex: 70%;
	/*border: 1px solid black;*/
	text-align: right;
	padding: 20px;
}

.menu a{
	color: white;
	text-decoration: none;
	font-size: 20px;
	padding: 20px 16px;
}

.menu a:hover{
	color: dodgerblue;
	border-top: 4px solid white;

}


#botao{
	background: black;
	border: 1px solid white;
	padding: 10px 25px;
	color: white;
	border-radius: 5px;
	margin-right: 10%;
	margin-left: 5%;


}

#botao:hover{
	border: 1px solid black;
	background: white;
	color: black;

}

.header{
	display: flex;
	flex-flow: row wrap;
	/*height: 600px;*/
	/*background: gray;*/
	justify-content: center;
	align-items: center;
	padding-top: 100px;
}


.headline p{
	color: gray;
	text-align: left;
	font-size: 20px;
	font-weight: bold;
}

.headline{
	flex: 40%;
	margin-left: 10%;
/*	border: 1px solid black;*/
}

.headline h2{
	font-weight: 900;
	font-size: 20px;
	color: black;
	padding: 0;
	margin: 0;

}

.img-headline{
	margin-right: 10%;
	flex: 40%;
	/*border: 1px solid deeppink;*/
	text-align: center;
}

.contact-btn{
	display: inline-block;
	background: black;
	padding: 20px;
	color: white;
	text-transform: uppercase;
	border-radius: 5px;
	text-decoration: none;
}


.contact-btn:hover{
	background: white;
	color: black;
	border: 1px solid rgb(0, 0, 0);

}


section{
	margin-top: 80px;
/*	border: 1px solid black;*/
	margin-left: 5%;
	margin-right: 5%;
	
	display: inline-block;
	padding: 5%;
	text-align: center;
	width: 90%;
/*	border: 1px solid black;*/
	margin-bottom: 15%;
}

section h2{
	width: 100%;
	font-size: 50px;
	margin: 0;
	font-family: roboto;
	font-weight: bold;
	color: black;
}


.serviços{
	display: inline-block;
	margin-top: 5%;
}

.card{
	display: inline-block;
	width: 30%;
	padding: 20px;
	margin: 1%;
	/*border: 1px solid black;*/
	border-radius: 10px;
	cursor: pointer;
	background: #c8c8c8;

}

.card-text p{
	font-size: 20px;
}



.card:hover{
	background: rgb(83, 83, 255);
	color: white;
	padding: 20px;
}



.texto-oculto{
	display: none;
}

.card:hover .texto-oculto{
	display: block;
}



footer{
    display: flex;
    background-color: black;
}

.logotipo{
   /* border: 1px solid rgb(235, 235, 235);*/
    position: relative;
    left: 10%;

}

.logotipo img{
    position: relative;
    top: 35%;
	width: 150px;
}


.paragrafos{
  /*  border: 1px solid rgb(255, 255, 255);*/
    width: 15%;
    display: flex;
    justify-content: center;
    position: relative;
    left: 25%;

}

.paragrafos h6{
    color: white;
    text-align: center;
    font-size: 15px;
    position: relative;
    left: 10%;

}


.paragrafos ul li{
    list-style: none;
}


.paragrafos ul li a{
    text-decoration: none;
    color: rgb(255, 255, 255);
	font-weight: bold;
	font-size: 15px;
}


.redes{
    position: relative;
    left: 50%;
    top: 35%;
  /*  border: 1px solid white;*/
    width: 15%;
}


.sobre{
    margin-left: 2%;
   /* border: 1px solid black;*/
    
    margin-top: 5%;
    
  
    
}


.sobre p{
    font-size: 25px;
	position: relative;
	bottom: 35%;
	
}

.icones{
    display: flex;
  /*  border: 1px solid white;*/
    position: relative;
    top: 10%;
    display: flex;
    justify-content: center;

    
}

.rosinha{
    border: 1px solid white;
    position: relative;
    top: 15%;
    background-color: white;
    padding: 10%;
    text-align: center;
    margin: 5%;
    border-radius: 15px;
}

.rosinha a{
    text-decoration: none;
    color: rgb(0, 0, 0);
}

.rosinha:hover{
  /*  background-color: black;*/
    color: white;
    cursor: pointer;
    transition: 0.4s;
}

.lista1{
	position: relative;
	right: 5%;
}


.lista3{
	position: relative;
	left: 5%;
}


.rosinha button{
    position: absolute;
    left: 30%;
}

.twitter img{
    width: 50px;
    
}

.facebook img{
    width: 50px;
    position: relative;
    left: 20%;

}


.insta img{
    width: 50px;
    position: relative;
    left: 40%;
}

.novo{
    border: 1px solid black;
}

.barulho{
    /*border: 1px solid black;*/
    margin: 5%;

    display: flex;
   /* border: 1px solid black;*/
    position: relative;
    
   
    margin-top: 0%;

}


.cartas{
    border: 1px solid black;
    margin: 5%;
    width: 25%;
    height: 60vh;
    border-radius: 10%;
    
}


.cartas:hover{
    background-color: rgb(116, 116, 255);
    transition: 0.1s;
}

.foto img{
    width: 50px;
    position: relative;
    left: 125px;
    top: 50px;
    
}

.texto{
    position: relative;
    top: 90px;
    text-align: center;
}

.texto a{
    text-decoration: none;
    color: black;
}


.titulo{
    position: relative;
    left: 38%;
    top: 25%;

   
  /*  border: 1px solid black;*/
   
}

.pagro{
    position: relative;
    right: 26%;
}


.titulo a{
    text-decoration: none;
    color: black;
    
}




.whats{
	position: fixed;
	bottom: 5px;
	right: 5px;
	width: 60px;
}

hr{
	position: relative;
	left: 5%;
}