.rollover1 {
  background-color: #ffffff;
  border: none;
  color: white;
  opacity: 1;
  transition: 400ms;
}

.rollover1:hover {opacity: 0.4}

.logobasdepage {
width: 55%;
height: auto;
}

.interac {
width:7%;
height:auto;
vertical-align:middle;
}

.mastercard {
width:15%;
height:auto;
vertical-align:middle;
}

.visa {
width:12%;
height:auto;
vertical-align:middle;
}

.interac-flash {
width:12%;
height:auto;
vertical-align:middle;
}




@media only screen and (max-width: 1500px) {


}





@media only screen and (max-width: 1200px) {



}





@media only screen and (max-width: 1100px) {

.logobasdepage {
width: 60%;
height: auto;
}

.interac {
width:9%;
height:auto;
vertical-align:middle;
}

.interac-flash {
width:15%;
height:auto;
vertical-align:middle;
}


.mastercard {
width:17%;
height:auto;
vertical-align:middle;
}

.visa {
width:15%;
height:auto;
vertical-align:middle;
}



}





@media only screen and (max-width: 1000px) {

.logobasdepage {
width: 65%;
height: auto;
}



}




@media only screen and (max-width: 900px) {

.logobasdepage {
width: 70%;
height: auto;
}

.interac {
width:11%;
height:auto;
vertical-align:middle;
}

.interac-flash {
width:20%;
height:auto;
vertical-align:middle;
}

.mastercard {
width:19%;
height:auto;
vertical-align:middle;
}

.visa {
width:20%;
height:auto;
vertical-align:middle;
}


}



@media only screen and (max-width: 800px) {

.logobasdepage {
width: 70%;
height: auto;
}

}





@media only screen and (max-width: 700px) {

.logobasdepage {
width: 70%;
height: auto;
}

}





@media only screen and (max-width: 600px) {

.logobasdepage {
width: 75%;
height: auto;
}


}





@media only screen and (max-width: 500px) {

.interac {
width:14%;
height:auto;
vertical-align:middle;
}

.interac-flash {
width:22%;
height:auto;
vertical-align:middle;
}


.mastercard {
width:23%;
height:auto;
vertical-align:middle;
}

.visa {
width:22%;
height:auto;
vertical-align:middle;
}

}