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

/**** HERO AND BACKGROUND IMAGE, INSIDE MAIN ****/
.hero-row {
 
	background-position: center;
}



.no-webp .hero-row { 
--large1: url(https://www.photolocations.co.nz/images/hero_nth_large@1x.jpg) ;
--large2: url(https://www.photolocations.co.nz/images/hero_nth_large@2x.jpg) ;
--medium1: url(https://www.photolocations.co.nz/images/hero_nth_medium@1x.jpg) ;
--medium2: url(https://www.photolocations.co.nz/images/hero_nth_medium@2x.jpg) ;
--small1: url(https://www.photolocations.co.nz/images/hero_nth_small@1x.jpg) ;
--small2: url(https://www.photolocations.co.nz/images/hero_nth_small@2x.jpg) ;
 }

.webp .hero-row { 
--large1: url(https://www.photolocations.co.nz/images/hero_nth_large@1x.webp) ;
--large2: url(https://www.photolocations.co.nz/images/hero_nth_large@2x.webp) ;
--medium1: url(https://www.photolocations.co.nz/images/hero_nth_medium@1x.webp) ;
--medium2: url(https://www.photolocations.co.nz/images/hero_nth_medium@2x.webp) ;
--small1: url(https://www.photolocations.co.nz/images/hero_nth_small@1x.webp) ;
--small2: url(https://www.photolocations.co.nz/images/hero_nth_small@2x.webp) ;
 }


/* If viewport is smaller or equal to 759px size */

@media only screen and (max-width: 759px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 759px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 759px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-width: 759px) and (min-device-pixel-ratio: 2), only screen and (max-width: 759px) and (min-resolution: 192dpi), only screen and (max-width: 759px) and (min-resolution: 2dppx) {
 .hero-row { 
 background-image: var(--small2); 
}}

@media only screen and (max-width: 759px) {
 .hero-row { 
 background-image: var(--small1); 
}}




/* If viewport is bigger or equal to 760px size AND smaller or equal to 940px size  */
 @media only screen and (min-width: 760px) and (max-width: 940px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 760px) and (max-width: 940px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 760px) and (max-width: 940px) and (-o-min-device-pixel-ratio: 2/1), only screen and (min-width: 760px) and (max-width: 940px) and (min-device-pixel-ratio: 2), only screen and (min-width: 760px) and (max-width: 940px) and (min-resolution: 192dpi), only screen and (min-width: 760px) and (max-width: 940px) and (min-resolution: 2dppx) {
 .hero-row { 
 background-image: var(--medium2); 
}}


@media only screen and (min-width: 760px) and (max-width: 940px) {
.hero-row { 
 background-image: var(--medium1); 

}}


/* If viewport is bigger or equal to 941px size  */
  @media only screen and (min-width: 941px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 941px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 941px) and (-o-min-device-pixel-ratio: 2/1), only screen and (min-width: 941px) and (min-device-pixel-ratio: 2), only screen and (min-width: 941px) and (min-resolution: 192dpi), only screen and (min-width: 941px) and (min-resolution: 2dppx) {

 .hero-row { 
 background-image: var(--large2); 
}}


@media only screen and (min-width: 941px) {
.hero-row { 
 background-image: var(--large1); 

}}