.sli{
	background-image: url('../img/15.jpg');
	height: 100vh;
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.mi{
	font-family: 'Candal', sans-serif;
	color: #000;
}
.colo{
	transition: all 0.3s ease-out;
}
.bg-primary{
	transition: all 0.3s ease-in;
}
.es{
	font-size: 15px;
}
.doc{
	opacity: 0;
}
.slid{
	width: 100%;	
}
.contor{
	border: 1px solid black;
	width: 100%;
	height: 186px;

}

.campo{
	width: 679px;
	height: 430px;
	background-image: url('../img/20.jpg');
	background-size: 100% 100%;
	transition: 0.3s;


}
.campo2{
	width: 560px;
	height: 380px;
	
}
.cam{
	width: 100%;
	height: 50%;
	background-image: url('../img/19.jpg');
	background-size: 100% 100%;
	transition: 0.3s;
	filter: grayscale(0%);
}
.cam2{
	width: 100%;
	height: 50%;
	background-image: url('../img/19.jpg');
	background-size: 100% 100%;
	transition: 0.3s;
	filter: grayscale(0%);
}
.conte{
	margin-top: 5%;
	width: 100%;
}
.mapa{
	width: 100%;
}
.campo:hover{
	background-size: 108% 108%;
	filter: grayscale(34%);
}

.cam:hover{
	background-size: 120% 130%;
}
.cam2:hover{
	background-size: 105% 105%;
	filter: grayscale(100%);
}
.mirar{
	width:100%;
	height: 100%;
	background-color: rgba(12, 94, 129, 0.8);
	opacity: 0;
	transition: 0.8s ease-in; 
}
.tw{
	color: #fff;
}


.mirar:hover{
	opacity: 1;
}


.marca{
	width: 100px;
	height: 90px;
	filter: grayscale(100%);
	transition: 0.3s;
}
.marca:hover{
	filter: grayscale(0%);
}

@media (max-width: 700px) {
	.conte{
		margin-top:500px;
	}
}

@media (max-width: 640px) {
	.conte{
		margin-top: 800px;
	}
}
@media (max-width: 560px) {
	.conte{
		margin-top: 90%;
	}
	.campo{
	width: 360px;
	height: 280px;
}
.campo2{
	width: 360px;
	height: 280px;
	
}
}
@media (max-width: 480px) {
	.conte{
		margin-top: 100%;
	}
}
@media (max-width: 440px) {
	.conte{
		margin-top: 120%;
	}
}
@media (max-width: 440px) {
	.conte{
		margin-top: 110%;
	}
}
@media (max-width: 380px) {
	.conte{
		margin-top: 138%;
	}
}
@media (max-width: 350px) {
	.conte{
		margin-top: 150%;
	}
}
@media (max-width: 350px) {
	.conte{
		margin-top: 200%;
	}
}
.parallax{    /* The image used */
    background-image: url("../img/32.jpg");

    /* Set a specific height */
    width: 100%;
    height: 300px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cir{
	width: 100px;
	height: 100px;
	background-color: red;
	border-radius: 50px;

}
.cir:hover{
	animation-name: bold;
	animation-duration: 3s;

}



@keyframes bold{

	0%{
	 transition: 
	}
	25%{
		background-color:green;
	}

	50%{
		background-color:gray;
	}

	75%{
		background-color:yellow;
	}

	100%{
		background-color:blue;
	}
}
.marcas{
	display: flex;
	justify-content: space-around;
	margin-bottom:10px;
}