<style type="text/css">
html {height:fit-content}
body {margin:0;padding:0;height:100%;overflow-x:hidden;overflow-y:scroll;font-family:"Roboto",sans-serif;font-optical-sizing:auto;font-style:normal;font-size:calc(16px + 0.1vw)}
form {padding:0;margin:0}
input[type=text],input[type=submit],button,input[type=button] {-webkit-appearance:none;border-radius:0}
select {border-radius:0}

/* mobile nav */
.mob_nav {position:fixed;z-index:10;top:0;left:0;width:min(100%,600px);height:100vh;background-color:#000000;border-right:solid 1px #ffffff;transition:0.3s}
.mob_nav.mn_closed {left:calc(-100% - 1px);pointer-events:none}
	.close_mn {position:absolute;z-index:2;top:0;right:0;color:#ffffff;text-decoration:none;font-size:20px;line-height:1;padding:15px;outline:none}
	.mn_logo {height:70px;padding:15px}
		.mn_logo img {max-width:100%;height:100%;display:block}
	.mn_pnl {height:calc(100vh - 100px);margin:0 15px;overflow:auto}
		.mn_n1 a {display:block;border-top:solid 1px #ffffff;padding:10px;color:#ffffff;text-decoration:none}
		
/* header */
.hdr {width:100%;background-color:#000000}
	.hdr_fx {position:relative;display:flex;justify-content:center;align-items:center;column-gap:2vmin;width:90%;margin:0 auto}
		.hgr {position:absolute;top:50%;left:0;transform:translate(0,-50%)}
		.hgr a {display:block;width:26px;height:37px;padding:3px 7px 0;margin:0 0 0 -7px}
			.hgr span {display:block;height:3px;background-color:#efefef;margin:6px 0 0;border-radius:2px}
		.avatar a {display:block;border:solid 1px #efefef}
			.hdr img {max-width:100%;display:block}

/* screens */
.screen {position:relative}
.screen:not(.home) {padding:0 0 100px;background-repeat:no-repeat;background-size:cover;background-position:center}
.screen.home {background-color:#000000;color:#efefef}
.gallery1 {background-image:url('images/weddings_bg.jpg')}
.gallery2 {background-image:url('images/property_bg.jpg')}
.gallery3 {background-image:url('images/portraits_bg.jpg')}
.gallery4 {background-image:url('images/commercial_bg.jpg')}
.gallery5 {background-image:url('images/product_bg.jpg')}
.mob_screen {width:90%;margin:5vh auto;background-color:#ffffff;color:#000000}
	.mob_screen h1 {font-size:calc(1vw + 20px);padding:0;margin:0 0 3vmin;font-weight:normal;text-transform:uppercase}
	.mob_screen p {margin:0;padding:0;line-height:1.6em}
	.mob_screen p:not(:last-child) {margin:0 0 3vmin}

.screen_ttl {display:flex;justify-content:center;padding:3vh 5%}
	.screen_ttl h1 {font-size:calc(1vw + 20px);padding:0;margin:0;font-weight:normal;text-transform:uppercase;color:#ffffff}
	.gallery1 h1, .gallery2 h1 {color:#000000}
	.screen_ttl img {max-width:100%;display:block}

.home_pnl {background-color:#000000;border:solid 1px #efefef}

/* go to top */
.gal_gtt {position:absolute;bottom:20px;left:50%;transform:translate(-50%,0);display:flex;justify-content:space-between;width:108px;height:49px;text-decoration:none;font-family:arial,sans-serif}
	.gal_gtt span {transition:0.2s}
	.gal_gtt > span {position:relative;width:47px;height:47px;border:solid 1px}
		.gal_gtt span span {position:absolute}
		.gal_gtt span:first-child span:first-child {top:0;left:15px;height:100%;width:1px}
		.gal_gtt span:first-child span:nth-child(2) {top:0;left:31px;height:100%;width:1px}
		.gal_gtt span:first-child span:nth-child(3) {top:15px;left:0;height:1px;width:100%}
		.gal_gtt span:first-child span:last-child {top:31px;left:0;height:1px;width:100%}
		.gal_gtt > span:last-child > span:first-child {top:12px;left:17px;width:3px;height:15px;transform:rotate(45deg)}	
		.gal_gtt > span:last-child > span:nth-child(2) {top:12px;right:17px;width:3px;height:15px;transform:rotate(-45deg)} 
		.gal_gtt > span:last-child > span:last-child {top:14px;left:22px;width:3px;height:20px;border-radius:3px 3px 0 0}

/* gallery */
.gallery1 .gal_gtt, .gallery2 .gal_gtt, .gallery5 .gal_gtt {color:#000000}
	.gallery1 .gal_gtt > span, .gallery2 .gal_gtt > span, .gallery5 .gal_gtt > span {border-color:#000000;opacity:0.2}
		.gallery1 .gal_gtt span span, .gallery2 .gal_gtt span span, .gallery5 .gal_gtt span span {background-color:#000000}
.gallery3 .gal_gtt, .gallery4 .gal_gtt {color:#ffffff}
	.gallery3 .gal_gtt > span, .gallery4 .gal_gtt > span {border-color:#ffffff;opacity:0.3}
		.gallery3 .gal_gtt span span, .gallery4 .gal_gtt span span {background-color:#ffffff}

/* nav line hvr states */
.nav_1_hvr #n-l1, .nav_2_hvr #n-l1, .nav_3_hvr #n-l1 {top:40vmin}
.nav_1_hvr #n-l2, .nav_2_hvr #n-l2, .nav_3_hvr #n-l2, .nav_4_hvr #n-l2, .nav_5_hvr #n-l2, .nav_6_hvr #n-l2 {top:50vmin}
.nav_1_hvr #n-l3, .nav_4_hvr #n-l3, .nav_7_hvr #n-l3 {left:40vmin}
.nav_1_hvr #n-l4, .nav_2_hvr #n-l4, .nav_4_hvr #n-l4, .nav_5_hvr #n-l4, .nav_7_hvr #n-l4, .nav_8_hvr #n-l4 {left:50vmin}
.nav_2_hvr #n-l3, .nav_3_hvr #n-l3, .nav_5_hvr #n-l3, .nav_6_hvr #n-l3, .nav_8_hvr #n-l3, .nav_9_hvr #n-l3 {left:10vmin}
.nav_3_hvr #n-l4, .nav_6_hvr #n-l4, .nav_9_hvr #n-l4 {left:20vmin}
.nav_4_hvr #n-l1, .nav_5_hvr #n-l1, .nav_6_hvr #n-l1, .nav_7_hvr #n-l1, .nav_8_hvr #n-l1, .nav_9_hvr #n-l1 {top:10vmin}
.nav_7_hvr #n-l2, .nav_8_hvr #n-l2, .nav_9_hvr #n-l2 {top:20vmin}

/* nav */
.nav {position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
	.nav-line {position:absolute;background-color:#efefef;transition:0.5s;z-index:1}
	#n-l1, #n-l2 {left:0;width:100%;height:1px}
	#n-l1 {top:20vmin}
	#n-l2 {top:40vmin}
	#n-l3, #n-l4 {top:0;width:1px;height:100%}
	#n-l3 {left:20vmin}
	#n-l4 {left:40vmin}

/* nav links */
.nav a {position:absolute;display:block;width:20vmin;height:20vmin;transition:0.5s;color:#ffffff;text-decoration:none;text-align:center}
.nav a.n-a-hvr {width:40vmin;height:40vmin}
#n-a1 {top:0;left:0}
#n-a2 {top:0;left:20vmin}
#n-a3 {top:0;left:40vmin}
#n-a4 {top:20vmin;left:0}
#n-a5 {top:20vmin;left:20vmin}
#n-a6 {top:20vmin;left:40vmin}
#n-a7 {top:40vmin;left:0}
#n-a8 {top:40vmin;left:20vmin}
#n-a9 {top:40vmin;left:40vmin}
	.nav a span {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;opacity:0;transition:opacity 0.5s}
	
/* nav btn hvr states */
.nav_1_hvr #n-a1 {width:40vmin;height:40vmin}
.nav_1_hvr #n-a2 {left:40vmin;width:10vmin;height:40vmin}
.nav_1_hvr #n-a3, .nav_2_hvr #n-a3 {left:50vmin;width:10vmin;height:40vmin}
.nav_1_hvr #n-a4 {top:40vmin;width:40vmin;height:10vmin}
.nav_1_hvr #n-a5 {top:40vmin;left:40vmin;width:10vmin;height:10vmin}
.nav_1_hvr #n-a6, .nav_2_hvr #n-a6 {top:40vmin;left:50vmin;width:10vmin;height:10vmin}
.nav_1_hvr #n-a7, .nav_4_hvr #n-a7 {top:50vmin;width:40vmin;height:10vmin}
.nav_1_hvr #n-a8, .nav_4_hvr #n-a8 {top:50vmin;left:40vmin;width:10vmin;height:10vmin}
.nav_1_hvr #n-a9, .nav_2_hvr #n-a9, .nav_5_hvr #n-a9, .nav_4_hvr #n-a9 {top:50vmin;left:50vmin;width:10vmin;height:10vmin}

.nav_2_hvr #n-a1, .nav_3_hvr #n-a1 {width:10vmin;height:40vmin}
.nav_2_hvr #n-a2 {left:10vmin;width:40vmin;height:40vmin}
.nav_2_hvr #n-a4, .nav_3_hvr #n-a4 {top:40vmin;width:10vmin;height:10vmin}
.nav_2_hvr #n-a5 {top:40vmin;left:10vmin;width:40vmin;height:10vmin}
.nav_2_hvr #n-a7, .nav_3_hvr #n-a7, .nav_5_hvr #n-a7, .nav_6_hvr #n-a7 {top:50vmin;width:10vmin;height:10vmin}
.nav_2_hvr #n-a8 {top:50vmin;left:10vmin;width:40vmin;height:10vmin}

.nav_3_hvr #n-a2 {left:10vmin;width:10vmin;height:40vmin}
.nav_3_hvr #n-a3 {left:20vmin;width:40vmin;height:40vmin}
.nav_3_hvr #n-a5 {top:40vmin;left:10vmin;width:10vmin;height:10vmin}
.nav_3_hvr #n-a6 {top:40vmin;left:20vmin;width:40vmin;height:10vmin}
.nav_3_hvr #n-a8, .nav_6_hvr #n-a8 {top:50vmin;left:10vmin;width:10vmin;height:10vmin}
.nav_3_hvr #n-a9, .nav_6_hvr #n-a9 {top:50vmin;left:20vmin;width:40vmin;height:10vmin}

.nav_4_hvr #n-a1, .nav_7_hvr #n-a1 {width:40vmin;height:10vmin}
.nav_4_hvr #n-a2, .nav_7_hvr #n-a2 {left:40vmin;width:10vmin;height:10vmin}
.nav_4_hvr #n-a3, .nav_5_hvr #n-a3, .nav_7_hvr #n-a3, .nav_8_hvr #n-a3 {left:50vmin;width:10vmin;height:10vmin}
.nav_4_hvr #n-a4 {top:10vmin;width:40vmin;height:40vmin}
.nav_4_hvr #n-a5 {top:10vmin;left:40vmin;width:10vmin;height:40vmin}
.nav_4_hvr #n-a6, .nav_5_hvr #n-a6 {top:10vmin;left:50vmin;width:10vmin;height:40vmin}

.nav_5_hvr #n-a1, .nav_6_hvr #n-a1, .nav_8_hvr #n-a1, .nav_9_hvr #n-a1 {width:10vmin;height:10vmin}
.nav_5_hvr #n-a2, .nav_8_hvr #n-a2 {left:10vmin;width:40vmin;height:10vmin}
.nav_5_hvr #n-a4, .nav_6_hvr #n-a4 {top:10vmin;width:10vmin;height:40vmin}
.nav_5_hvr #n-a5 {top:10vmin;left:10vmin;width:40vmin;height:40vmin}
.nav_5_hvr #n-a8 {top:50vmin;left:10vmin;width:40vmin;height:10vmin}

.nav_6_hvr #n-a2, .nav_9_hvr #n-a2 {left:10vmin;width:10vmin;height:10vmin}
.nav_6_hvr #n-a3, .nav_9_hvr #n-a3 {left:20vmin;width:40vmin;height:10vmin}
.nav_6_hvr #n-a5 {top:10vmin;left:10vmin;width:10vmin;height:40vmin}
.nav_6_hvr #n-a6 {top:10vmin;left:20vmin;width:40vmin;height:40vmin}

.nav_7_hvr #n-a4 {top:10vmin;width:40vmin;height:10vmin}
.nav_7_hvr #n-a5 {top:10vmin;left:40vmin;width:10vmin;height:10vmin}
.nav_7_hvr #n-a6, .nav_8_hvr #n-a6 {top:10vmin;left:50vmin;width:10vmin;height:10vmin}
.nav_7_hvr #n-a7 {top:20vmin;width:40vmin;height:40vmin}
.nav_7_hvr #n-a8 {top:20vmin;left:40vmin;width:10vmin;height:40vmin}
.nav_7_hvr #n-a9, .nav_8_hvr #n-a9 {top:20vmin;left:50vmin;width:10vmin;height:40vmin}

.nav_8_hvr #n-a4, .nav_9_hvr #n-a4 {top:10vmin;width:10vmin;height:10vmin}
.nav_8_hvr #n-a5 {top:10vmin;left:10vmin;width:40vmin;height:10vmin}
.nav_8_hvr #n-a7, .nav_9_hvr #n-a7 {top:20vmin;width:10vmin;height:40vmin}
.nav_8_hvr #n-a8 {top:20vmin;left:10vmin;width:40vmin;height:40vmin}

.nav_9_hvr #n-a5 {top:10vmin;left:10vmin;width:10vmin;height:10vmin}
.nav_9_hvr #n-a6 {top:10vmin;left:20vmin;width:40vmin;height:10vmin}
.nav_9_hvr #n-a8 {top:20vmin;left:10vmin;width:10vmin;height:40vmin}
.nav_9_hvr #n-a9 {top:20vmin;left:20vmin;width:40vmin;height:40vmin}

/* content panel */	
.pnl_content h2 {font-size:calc(1vw + 20px);padding:0;margin:0 0 2vmin;font-weight:normal;text-transform:uppercase}
.pnl_content p {margin:0;padding:0;line-height:1.6em}
.pnl_content p:not(:last-child) {margin:0 0 3vmin}
.close_pnl {position:absolute;z-index:2;top:5px;right:5px;color:#ffffff;text-decoration:none;font-size:20px;line-height:1;padding:5px;opacity:0}
.home_pnl_OPEN .close_pnl {opacity:1}

/* gallery */
.gallery {display:flex;width:80%;column-gap:8vmin;margin:0 auto}
	.gal_main {position:relative;background-color:#ffffff}
		.gal_loader {position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background-color:#ffffff;opacity:0;transition:opacity 1s}
		.gal_loader_ani {opacity:1;transition:opacity 0s}
		.gal_img {position:absolute;background-repeat:no-repeat;background-size:cover;background-position:center;overflow:hidden;opacity:1;transition:opacity 0.5s}
	.gal_nav {overflow:auto;-ms-overflow-style:none;scrollbar-width:none;background-color:#ffffff}
	.gal_nav::-webkit-scrollbar {display:none}
		.gal_fx {display:flex;column-gap:10px}
	
/* splitter */	
.splitter {height:7vmin}
.line {margin:0 0 3vmin;background-color:#454545;height:1px}	

/* contact form */
.contact_form {background-color:#454545;padding:15px}
.contact_form_ani {opacity:0;transition:opacity 0.2s}
	.cf_fx {display:flex;align-items:center;row-gap:3px;margin:0 0 5px;width:100%}
		.cf_fx span:first-child {width:150px}
		.cf_fx input[type="text"] {width:300px;height:30px;border:solid 1px #000000;padding:0 5px;outline:none}
		.cf_fx textarea {width:50vw;height:100px;border:solid 1px #000000;padding:5px;outline:none}		
		.cf_focus {background-color:#ffffff !important;border-color:#9EE9FF !important;box-shadow:0 0 3px 2px rgba(0,153,198,0.1)}
		.cf_fx a {display:inline-block;background-color:#000000;color:#ffffff;border:solid 1px #ffffff;padding:10px 20px;font-size:15px;margin:5px 0 0;text-decoration:none}

.cf_done {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;display:flex;align-items:center;justify-content:center;column-gap:10px}
.cf_done_ani {opacity:1;transition:opacity:0.2s;transition-delay:0.2s}
	.cf_spinner {position:relative;width:50px;height:50px}
		.cf_s_tick {position:absolute;z-index:4;top:5px;left:5px;width:40px;height:40px;background-color:#000000;border-radius:50%;text-align:center;font-size:18px;line-height:40px}
			.cf_s_tick span {opacity:0}
			.cf_s_tick_ani {animation:cf_s_tick_ani 0.2s linear both;animation-delay:1.3s}
			@keyframes cf_s_tick_ani {0% {opacity:0} 100% {opacity:1}}
			
		.cf_s_hold {position:absolute;width:100%;height:100%;clip:rect(0,50px,50px,25px);border-radius:100%;background-color:#292929}
			.cf_s_fill {background-color:#049900}
			.cf_s_fill {position:absolute;width:100%;height:100%;border-radius:100%;clip:rect(0,25px,50px,0)}
				.cf_s_left .cf_s_fill {z-index:1}
				.cf_s_left_ani .cf_s_fill {animation:cf_s_left_ani 0.5s linear both;animation-delay:0.4s}		
				@keyframes cf_s_left_ani {0% {transform:rotate(0deg)} 100% {transform:rotate(180deg)}}

			.cf_s_right {z-index:3;transform:rotate(180deg)}
				.cf_s_right .cf_s_fill {z-index:3}
				.cf_s_right_ani .cf_s_fill {animation:cf_s_right_ani 0.5s linear both;animation-delay:0.9s}	
				@keyframes cf_s_right_ani {0% {transform:rotate(0deg)} 100% {transform:rotate(180deg)}}
				
/* footer */
.footer {background-color:#000000;text-align:center;color:#ffffff;padding:5vmin 5% 10vmin}
	.ftr_ttl {font-size:calc(1vw + 20px);margin:0 0 1vmin}
	.ftr_dsc {font-size:12px}
				
@media only screen and (orientation:landscape) and (pointer:fine) {
	.close_pnl, .screen_ttl img, .nav_container {display:block}
	.hdr_buffer, .hgr, .mob_logo, .mob_nav, .screen_ttl h1, .mob_nav_container, .mob_home_grid_bg {display:none}
	
	.hdr {padding:5vmin 0 10vmin;height:80px}
	.hdr {padding:5vmin 0 10vmin;height:80px}
		.avatar a {width:78px;height:78px}
				
	/* home screens */
	.screen.home {min-height:calc(100vh - 10vmin - 80px)}
	.screen:not(.home) {min-height:calc(100vh - 100px)}
	.home_pnl {position:absolute;z-index:1;left:50%;top:0;transform:translate(-50%,0);width:60vmin;height:60vmin;background-color:#000000;border:solid 1px #efefef;opacity:0;pointer-events:none;transition:width 0.2s 0.2s, opacity 0.2s 0.4s}
	.home_pnl_OPEN {z-index:2;width:80%;opacity:1;pointer-events:auto;transition:width 0.2s 0.2s, opacity 0.2s 0s}
		.pnl_content {position:absolute;top:4vmin;left:4vmin;width:calc(100% - 8vmin);height:calc(100% - 8vmin);overflow:auto;opacity:0;transition:opacity 0.2s 0s}
		.pnl_content_OPEN {opacity:1;transition:opacity 0.2s 0.4s}

		/* nav grid */
		.nav_container {position:absolute;z-index:0;top:0;left:50%;transform:translate(-50%,0);width:60vmin;height:60vmin;border:solid 1px #efefef}
		.nav_container_HIDE {opacity:0;transition:opacity 0.2s}
	
	/* galleries */
	.gallery {width:80%;column-gap:4vw}
	.gal_main {width:calc(70% - 2vw);height:70vh}
		.gal_img {top:15px;left:15px;width:calc(100% - 30px);height:calc(100% - 30px)}
	.gal_nav {width:calc(30% - 2vw - 30px);height:calc(70vh - 30px);border:solid 15px #ffffff}
		.gal_fx {justify-content:space-between;row-gap:10px;flex-wrap:wrap}
			.gal_thumb {position:relative;width:calc(50% - 5px);height:0;padding:0 0 30%}
				.gal_thumb a {position:absolute;top:0;left:0;display:block;width:100%;height:100%;overflow:hidden}
					.gal_thumb img {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;max-width:100%}
					
	/* hvr states */
	.gal_gtt span:first-child:hover span:first-child {left:10px}
	.gal_gtt span:first-child:hover span:nth-child(2) {left:36px}
	.gal_gtt span:first-child:hover span:nth-child(3) {top:10px}
	.gal_gtt span:first-child:hover span:last-child {top:36px}
	.gallery1 .gal_gtt > span:hover, .gallery2 .gal_gtt > span:hover, .gallery5 .gal_gtt > span:hover {opacity:0.3}
	.gallery3 .gal_gtt > span:hover, .gallery4 .gal_gtt > span:hover {opacity:0.4}
	.nav a:hover span {opacity:1}
	.cf_fx input[type="text"]:hover, .cf_fx textarea:hover {background-color:#DCF3FF}
	.cf_fx a:hover {background-color:#292929}
}
@media only screen and (orientation:landscape) and (pointer:fine) and (max-width:1400px) {
	.gallery {width:90%}
	.gal_main {width:calc(80% - 2vw)}
}
@media only screen and (pointer:coarse), only screen and (orientation:portrait) {
	/* on/off */
	.mob_nav, .screen_ttl h1, .mob_home_grid_blackout {display:block}
	.nav_container, .screen_ttl img, .dkt_logo, .close_pnl {display:none}
	
	/* hdr */
	.hdr {position:fixed;top:0;left:0;z-index:4;padding:3vh 0;height:50px}
	.hdr_buffer {padding:3vh 0;height:50px}
		.avatar a {width:48px;height:48px}
	
	/* home screens */
	.screen.home {min-height:calc(89vh - 50px);padding:0 0 5vh}
		.mob_logo img {max-height:50px}
		.home_pnl {position:relative;z-index:2;width:90%;margin:0 auto;display:none}
		.home_pnl_OPEN {display:block;min-height:calc(89vh - 50px)}
			.pnl_content {padding:4vmin}
			
		/* home grid */
		.mob_home_grid {position:absolute;z-index:0;top:50%;left:50%;transform:translate(-50%,-50%);border:solid 1px #efefef;width:60vmin;height:60vmin;margin-top:-8vmax}
			.mob_home_grid span {position:absolute;z-index:1;background-color:#efefef;opacity:1;transition:opacity 0.2s 0.6s}
			.mob_home_grid span:first-child {top:50%;left:0;width:100%;height:1px}
			.mob_home_grid span:nth-child(2) {top:0;left:50%;width:1px;height:100%}		
			.mob_home_grid_bg {position:absolute;top:0;left:0;width:100%;height:100%;opacity:1;transition:0.6s 0.6s}
				.mob_home_grid_bg img {display:block;width:100%;height:100%}
		
	/* galleries */
	.gallery {flex-direction:column;row-gap:3vmin;width:90%}
	.gallery2 .gallery, .gallery4 .gallery {flex-direction:column-reverse}
	.gal_main {height:50vh}
		.gal_img {top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
	.gal_nav {height:10vh;border:solid 10px #ffffff}
		.gal_thumb a {height:10vh;width:inherit;overflow:hidden;display:block}
			.gal_thumb img {height:100%;display:block}
	
	/* contact form */
	.cf_fx {flex-direction:column}		
		.cf_fx span:first-child, .cf_fx span {width:100%}
			.cf_fx input[type="text"], .cf_fx textarea {width:calc(100% - 12px)}
			.cf_fx:last-child span:last-child {text-align:center}
			.cf_fx:not(:last-child) {margin:0 0 10px}
	
	.gal_gtt {width:49px}
		.gal_gtt > span:first-child {display:none}
}
@media only screen and (pointer:coarse) and (orientation:landscape) {
	.mob_home_grid {width:80vmin;height:50vmin;margin-top:-4vmax}
		.mob_home_grid_bg {overflow:hidden}
			.mob_home_grid_bg img {position:absolute;top:50%;height:auto;transform:translate(0,-50%)}
}
	
</style>