.box img{
	width: 100%;
  	height: auto;
}

@supports(object-fit: cover){
    .box img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}


.carta {
	transition: transform .2s;
	width: 50%;
}
.carta2 {
  transition: transform .2s;
  width: 100%;
}
.carta:hover {
	transform: scale(1.05);
}
@media only screen and (max-width: 425px) {
    .carta {
      width: 100%;
    }
}
@media only screen and (max-width: 425px) {
    .respo {
      font-size: 14px;
    }
}
@media only screen and (max-width: 320px) {
    .respo {
      font-size: 11px;
    }
}
.navbar{
    background-color: #000 !important;
}
.float-box{
    margin-top: 10%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 10px 20px;
    width: 40%;
    float: right;
    margin-right: 20px;
}

@media only screen and (max-width: 768px) {
    .float-box{
    margin-top: 10%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 10px 20px;
    width: 90%;
    float: none;
    margin-right: 20px;
    margin-left: 20px;
}
}
@media only screen and (max-width: 425px) {
    .float-box{
    margin-top: 100px !important;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 10px 20px;
    width: 90%;
    float: none;
    margin-right: 20px;
    margin-left: 20px;
}
}
.float-box2{
    margin-top: 10%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 10px 20px;
    width: 40%;
    float: left;
    margin-right: 20px;
}

@media only screen and (max-width: 768px) {
    .float-box2{
    margin-top: 10%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 10px 20px;
    width: 90%;
    float: none;
    margin-right: 20px;
    margin-left: 20px;
}
}
@media only screen and (max-width: 425px) {
    .float-box2{
    margin-top: 100px !important;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 10px 20px;
    width: 90%;
    float: none;
    margin-right: 20px;
    margin-left: 20px;
}
}