@charset "utf-8";
/* CSS Document */

    *{
        font-family: 'Lato', sans-serif;
        margin: 0;
        padding: 0;
    }
    
	.vendedor-conteiner{
		width: 100%;
		text-align: center;
		padding: 5px;
		color: white;
		font-weight: 600;
		transition: 0.25s ease-in-out;
		
		background: rgba(19,236,63,1);
		background: -moz-linear-gradient(left, rgba(19,236,63,1) 0%, rgba(34,232,212,1) 100%);
		background: -webkit-gradient(left top, right top, color-stop(0%, rgba(19,236,63,1)), color-stop(100%, rgba(34,232,212,1)));
		background: -webkit-linear-gradient(left, rgba(19,236,63,1) 0%, rgba(34,232,212,1) 100%);
		background: -o-linear-gradient(left, rgba(19,236,63,1) 0%, rgba(34,232,212,1) 100%);
		background: -ms-linear-gradient(left, rgba(19,236,63,1) 0%, rgba(34,232,212,1) 100%);
		background: linear-gradient(to right, rgba(19,236,63,1) 0%, rgba(34,232,212,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#13ec3f', endColorstr='#22e8d4', GradientType=1 );
		
		border: 1px solid transparent;
		border-image: linear-gradient(to right, #13ec3f , #22e8d4);
		border-image-slice: 1;
	}
	
	.vendedor-conteiner:hover{
		background: white;
		
		color: rgba(19,236,63,1);
		color: -moz-linear-gradient(left, rgba(19,236,63,1) 0%, rgba(34,232,212,1) 100%);
		color: -webkit-gradient(left top, right top, color-stop(0%, rgba(19,236,63,1)), color-stop(100%, rgba(34,232,212,1)));
		color: -webkit-linear-gradient(left, rgba(19,236,63,1) 0%, rgba(34,232,212,1) 100%);
		color: -o-linear-gradient(left, rgba(19,236,63,1) 0%, rgba(34,232,212,1) 100%);
		color: -ms-linear-gradient(left, rgba(19,236,63,1) 0%, rgba(34,232,212,1) 100%);
		color: linear-gradient(to right, rgba(19,236,63,1) 0%, rgba(34,232,212,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#13ec3f', endColorstr='#22e8d4', GradientType=1 );
		
	}
	
	.vendedor-conteiner:active{
		background: red;
		border: none;
		color: white;
		transition: none;
	}
	
	.cidade{
		position:absolute;
		height:100vh;
		width:25%;
	
		}
	.foto{
		width:25%;
		height:25%;
		}
	.frase{
		margin-bottom:0px;
		z-index:1000;
		}
    
    @media screen and (max-width:700px){
        
  .vendedor-conteiner{
		background:rgb(0,153,51);
		width:25%;
		float:left;
		}