body.overnav { overflow: hidden; overflow-y: scroll;  }
.nav {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	z-index: -1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;
	-webkit-transform:all 0.1s; -moz-transform:all 0.1s; transition:all 0.1s;  
}
.nav.overnav { 
	z-index: 9; 
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
	background-color:#000000; color: #fff;
}

.close-wrapper {
    display:inline-block; 
    position: absolute; top: 0px; left: 0px; z-index: 90; 
}

.close-button { 
	display:block; width:100px; height:100px; 
	background-image: url('images/mobile-menu-close.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 28px 28px;
}
.close-button img { display: none; }

.menu-logo { display:block; width: 361px; position: absolute; top: 79px; right: 60px;  }
.menu-logo img { width: 100%; }

.mainmenu { font-size: 34px; font-weight: 200; padding: 180px 0 0 60px; }
body.home .mainmenu,
body.page-id-7 .mainmenu { padding: 160px 0 0 60px; }

.mainmenu > ul { display: block; width: 380px; margin: 0; padding: 0; list-style: none none; list-style-position: inside;  }
.mainmenu > ul > li { position: relative; }
.mainmenu > ul > li > a { 
	display: block; position: relative;  padding: 10px 15px 10px 0; color: #444444; font-weight: 400;
	-webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;
}
.mainmenu > ul > li.has-submenu > a::after { 
	display: block; content: ""; height: 2px; background-color: transparent; 
	position: relative; width: 100%; top: -23px;
	-webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;
}
.mainmenu > ul > li > a > span { display: inline-block; padding-right: 15px; background-color: #000000; position: relative; z-index: 10;}

/* Submenus */
.submenus { 
	opacity: 0; pointer-events: none;
	position: absolute; top: 9px; left: 100%;  
	margin: 0; padding: 0; list-style: none none; list-style-position: inside; 
	-webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;
}
.submenus li { white-space: nowrap; font-size: 24px; }
.submenus li a { 
	display: block; padding: 4px 0; color: #444444; font-weight: 400;
	-webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;
}
.submenus li a:hover { color: #ffffff; text-decoration: none; }

/* Active */
.mainmenu > ul > li.active > a { color: #ffffff; }
/* Hover */
.mainmenu > ul > li.has-submenu:hover > a::after { background-color: #fff; }
.mainmenu > ul > li:hover .submenus { opacity: 1; pointer-events:auto; }
.mainmenu > ul > li:hover > a,
.mainmenu > ul > li:hover .submenus li a:hover { color: #fff; text-decoration: underline; }



/* Hamburger */
.hamburger { 
    padding: 0; color: #fff; transform: scale(0.7); 
    position: relative; z-index: 100; 
}
.hamburger-menu { /* display: inline-block; position: absolute; top: 0px; left: -6px; z-index: 10; */  }
.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before { background-color: #1e1e1e;   }
.hamburger-label {  float: left; margin-right: 15px; font-weight: normal; text-transform:none;   }
.hamburger-inner, .hamburger-inner::after, 
.hamburger-inner::before { height: 3px; border-radius: 0px; width: 36px; }


.overnav .hamburger-inner,
.overnav .hamburger-inner::after, 
.overnav .hamburger-inner::before { background-color: #ffffff;   }


/* •○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○• */
/*																	   */
/* 							BREAKPOINTS ------------------------------ */
/*																	   */
/* •○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○•○◙◘◙○• */

@media (max-width:767px) {
    /* WordPress Core | http://codex.wordpress.org/CSS */ .alignnone { margin: 5px 0px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { display:block; width:100%; height:auto; float:none; margin: 5px 0 20px 0px; } .alignleft { display:block; width:100%; height:auto; float: none; margin: 5px 0px 20px 0; } a img.alignright { display:block; width:100%; height:auto; float: none; margin: 5px 0 20px 0px; } a img.alignnone { display:block; width:100%; height:auto; margin: 5px 0px 20px 0; } a img.alignleft { display:block; width:100%; height:auto; float: none; margin: 5px 0px 20px 0; } .wp-caption { padding: 0; max-width: 100%; /* Image does not overflow the content area */ } .wp-caption.alignnone { margin: 5px 0px 20px 0; } .wp-caption.alignleft { display:block; width:100%; height:auto; float: none; margin: 5px 0px 20px 0; } .wp-caption.alignright { display:block; width:100%; height:auto; float: none; margin: 5px 0 20px 0px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 100%; padding: 0; width: auto; }
    body { font-size: 16px; }
	/* https://stackoverflow.com/questions/44543157/how-to-hide-the-google-invisible-recaptcha-badge */
	/* .grecaptcha-badge */
	
	
	
	.nav.overnav { overflow-y: scroll; }
	.close-wrapper {  top: 20px; right: 17px; left: 17px; }
	body.home .close-wrapper,
	body.page-id-7 .close-wrapper { top: 20px; }
	
	.menu-logo { width: 160px; top: 4px; right: 20px; }
	.close-button { width: 24px; height: 24px; background-size: 24px 24px; }
	
	.mainmenu { font-size: 19px; font-weight: 300; padding: 51px 0 0 15px; }
	body.home .mainmenu,
	body.page-id-7 .mainmenu { padding: 56px 0 0 16px; }
	.mainmenu > ul { width: 100%; }
	.mainmenu > ul > li.has-submenu > a::after { opacity: 0; }
	.mainmenu > ul > li > a { padding-top: 4px; padding-bottom: 4px; color: rgba(255,255,255,0.8); }

	.submenus { position: static; opacity: 1; padding-left: 15px; border-left: 1px solid #fff;   }
	.submenus li { font-size: 18px; } 
	.submenus li a { padding-top: 3px; padding-bottom: 3px; color: rgba(255,255,255,0.5); }

} /* End of @media ----------------------------------------------------------------------------- */

/* https://css-tricks.com/snippets/css/orientation-lock/ */
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) { } /* End of @media ----------------------------------------------------------------------------- */

/* SM - SECONDARY */
/* Old small -screen devices (tablets, 575px and up) : KEEP IT AFTER :  @media (max-width:767px) */
@media (max-width:575px) {}
/* @media ==================================================================================== */
@media (max-width:575px) and (orientation:landscape) {}
/* @media ==================================================================================== */
/* --------------------------------------------------------------------------------------------- */


/* MD */
/* Medium devices (tablets, 768px and up) */
@media (min-width:768px) and (max-width:991px) {
	.close-wrapper {  top: 42px; left: 30px; }
	body.home .close-wrapper,
	body.page-id-7 .close-wrapper { top:42px; left: 45px; }
	.close-button { width: 24px; height: 24px; background-size: 24px 24px; }
	.mainmenu { padding-top: 94px; padding-left: 30px; font-size: 24px; }
	body.home .mainmenu,
	body.page-id-7 .mainmenu { padding-top: 86px; padding-left: 43px;  }
	.mainmenu > ul { width: 280px; }
	.mainmenu > ul > li > a { padding-top: 8px; padding-bottom: 8px; }
	.mainmenu > ul > li.has-submenu > a::after { top: -17px; height: 1px; }
	.submenus { top: -1px; }
	.submenus li { font-size: 22px; }
	.menu-logo { top: 40px; right: 40px; width: 240px; }
	.page-id-9 .menu-logo { top: 20px; } /* Gallery */

} /* End of @media ----------------------------------------------------------------------------- */


/* The following codes are specifically for iPad (portrait and landscape): */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {} /* @media iPad Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
}
/* @media iPad Portrait  ==================================================================================== */

/* LG */
/* Large devices (desktops, 992px and up) */
@media (min-width:992px) and (max-width:1247px) {
	.close-wrapper {  top: 44px; left: 30px; }
	body.home .close-wrapper,
	body.page-id-7 .close-wrapper { top:62px; left: 62px; }
	.mainmenu { padding-top: 100px; padding-left: 30px; font-size: 28px; }
	body.home .mainmenu,
	body.page-id-7 .mainmenu { padding-top: 105px; }
	.mainmenu > ul { width: 300px; }
	.mainmenu > ul > li > a { padding-top: 8px; padding-bottom: 8px; }
	.mainmenu > ul > li.has-submenu > a::after { top: -17px; height: 1px; }
	.submenus { top: 4px; }
	.submenus li { font-size: 22px; }
	.menu-logo { top: 40px; right: 40px; width: 240px; }
	.page-id-9 .menu-logo { top: 20px; } /* Gallery */
	

} /* End of @media ----------------------------------------------------------------------------- */

/* XL: 1280x1024 */
/* Extra large devices (large desktops, 1280 and up) */
@media (min-width:1248px) and (max-width: 1333px) {
	.close-wrapper {  top: 130px; right: 45px; }
	body.home .close-wrapper,
	body.page-id-7 .close-wrapper { top: 56px; }
	.mainmenu { padding-top: 186px; font-size: 28px; }
	body.home .mainmenu,
	body.page-id-7 .mainmenu { padding-top: 100px; }
	.mainmenu > ul > li > a { padding-top: 8px; padding-bottom: 8px; }
	.mainmenu > ul > li.has-submenu > a::after { top: -17px; height: 1px; }
	.submenus { top: 4px; }
	.submenus li { font-size: 22px; }
	.menu-logo { top: 60px; right: 120px; width: 320px; }
	 
} /* End of @media ----------------------------------------------------------------------------- */

/* 2XL: 1366 x 768 */
/* Extra large devices (large desktops, 1366px and up) */
@media (min-width:1334px) and (max-width: 1407px) {
	.close-wrapper {   }
	body.home .close-wrapper { }
	
	
} /* End of @media ----------------------------------------------------------------------------- */


/* 3XL: 1440×900 */
/* Extra large devices (large desktops, 1440 and up) */
@media (min-width:1408px) and (max-width: 1879px) {
} /* End of @media ----------------------------------------------------------------------------- */

/* SPECIAL OCCASIONS ONLY  */


@media (max-width:575px) {}
@media (min-width:576px) {}
@media (min-width:768px) {}
@media (min-width:992px) {}
@media (min-width:1248px) { /* DEFAULT 1200px  changed to 1248px */
	
	
} /* End of @media ----------------------------------------------------------------------------- */
@media (min-width:1334px) {}
@media (min-width:1408px) {}
@media (min-width:1880px) { /* 1920×1080px AND UP  */
} /* End of @media ----------------------------------------------------------------------------- */