
/*___________________________________________________________________________________*/
.princiapl {
	width: 80vw;
	color: #f5ecfb;
	text-align: center;
	font-size: 2.5rem;
	margin: 1rem auto;

}

.principal_container {
	margin-top: 2rem;
	width: 80vw;

}

.principal_conteudoServicos {
	margin: 0 auto;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-around;
	margin: 2rem 0 4rem 0;
}

.princiapl_servicos__webtitulo {
	color: #f5ecfb;
	font-size: 1.6rem;
	margin-bottom: 1.6rem;
	text-align: left;
	border-bottom: #2f2835 solid 4px; /*353536*/
	padding-bottom: 0.5rem;

}

.webDesign_texto {
	width: 25vw;
	font-size: 1.3rem;
	text-align: justify;
}

.principal_referencia {
	text-decoration: none;
	color: #f5ecfb;

}

.principal_referencia:visited {
	color: #b0b0b0;


}


.principal_tablet {
	height: 11rem;

}

.principal_notebook {
	height: 16rem;
	margin-right: 3.9rem;

}

.principal_cel {
	height: 8rem;

}

/*__________________________________________________________________________________*/
.principal_conteudo__design {
	display: flex;
	justify-content: space-between;

}

.exemplo1, .exemplo2 {
	box-shadow: 10px 10px 8px #000000;
	height: 18rem;
	transition:  transform .75s;	
	
}

.exemplo1:hover, .exemplo2:hover {
	transform: scale(1.1);
	transition: 0.4s;
	transition:  transform .75s;
}

.video {
	box-shadow: 10px 10px 8px #000000;
	height: 18rem;

}

@media screen and (max-width: 500px) {
    .princiapl {
        font-size: 2rem;
        margin: 20rem auto;
        margin-bottom: 2rem;

    }

    .principal_conteudoServicos {
        display: flex;
        flex-direction: column;
        width: 80%;
        margin: 0 auto;
    }

    .principal_tablet {
        height: 6.5rem;
        margin: 1rem;
    }
    
    .principal_notebook {
        height: 8rem;
        margin: 1rem;
    
    }
    
    .principal_cel {
        height: 4rem;
        margin: 1rem;
    }

    .webDesign_texto {
        margin: 2rem auto;
        width: 100%;
        text-align: center;

    }

    .exemplo1 {
        margin-bottom: 3rem;

    }

    .video {
        box-shadow: 3px 20px 30px #000000;
        height: auto;
        width: 100vw;
    }
    
}
