@charset "UTF-8";

/* ----- Small screen, Non-retina 400px ----- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 400px),
only screen and (min--moz-device-pixel-ratio: 2)      and (min-width: 400px),
only screen and (-o-min-device-pixel-ratio: 2/1)    and (min-width: 400px),
only screen and (min-device-pixel-ratio: 2)      and (min-width: 400px),
only screen and (min-resolution: 192dpi) and (min-width: 400px),
only screen and (min-resolution: 2dppx)  and (min-width: 400px) {	 
.sm-400px {
background-image: url(img/barcelona.jpg);
}
}

/* ----- Medium screen, Retina, 768px ----- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 768px),
only screen and (min--moz-device-pixel-ratio: 2)      and (min-width: 768px),
only screen and (-o-min-device-pixel-ratio: 2/1)    and (min-width: 768px),
only screen and (min-device-pixel-ratio: 2)      and (min-width: 768px),
only screen and (min-resolution: 192dpi) and (min-width: 768px),
only screen and (min-resolution: 2dppx)  and (min-width: 768px) { 
.md-768px {
background-image: url(img/barcelona.jpg);
}	
}

/* ----- Large screen, Retina, 1200px ----- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1200px),
only screen and (min--moz-device-pixel-ratio: 2)      and (min-width: 1200px),
only screen and (-o-min-device-pixel-ratio: 2/1)    and (min-width: 1200px),
only screen and (min-device-pixel-ratio: 2)      and (min-width: 1200px),
only screen and (min-resolution: 192dpi) and (min-width: 1200px),
only screen and (min-resolution: 2dppx)  and (min-width: 1200px) { 

.lg-1200px {
background-image: url(img/barcelona.jpg);
}
}

/* ----- Large screen, Retina, 2560px ----- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 2560px),
only screen and (min--moz-device-pixel-ratio: 2)      and (min-width: 2560px),
only screen and (-o-min-device-pixel-ratio: 2/1)    and (min-width: 2560px),
only screen and (min-device-pixel-ratio: 2)      and (min-width: 2560px),
only screen and (min-resolution: 192dpi) and (min-width: 2560px),
only screen and (min-resolution: 2dppx)  and (min-width: 2560px) { 

.lg-2560px {
background-image: url(img/barcelona_2.jpg);
}
}