/*--------------------------------------------------------------
  layout-jw media queries.css
--------------------------------------------------------------*/


/* MOBIEL -------------------------- */
@media screen and (max-width: 739px) {
	/* header*/
	.rplcmnt-header {
		height: calc(100vh * 0.15);
	}
	.home .rplcmnt-header {
		height: 180px;
	}
	a#enter {
		top: 120px;
	}
	.header-bg.full-width {
		display: none;
	}
	/* branding*/
	.sunn-logo {
		position: relative;
		width: calc(100vw - 130px);
		left: 15px;
	}
	.site.ontop .sunn-logo {
		width: calc(100vw - 32px);
	}
	.home .site.ontop .sunn-logo {
		top: 50vh;
	}
	.main-navigation .sunn-logo,
	.site.ontop .main-navigation .sunn-logo {
		width: 250px;
		top: 0;
	}
	.header-bg {
		bottom: 2px;
	}
	
	/* nav */
	.main-navigation {
		left: 0; top: 0;
		height: 100%;
	}
	.home .site.ontop .main-navigation {
		height: 0;
	}
	button.menu-toggle {
		right: 16px; top: 50%; 
		margin-top: -16px;
	}
	.site.ontop button.menu-toggle {
		top: calc(100% + 10px); 
		margin-top: 0;
	}
	.home .site.ontop button.menu-toggle,
	.main-navigation.toggled button.menu-toggle {
		top: 16px; 
		margin-top: 0;
	}
	.search-toggle {
		right: 58px; top: 50%;
		margin-top: -18px;
	}
	.site.ontop .search-toggle {
		top: calc(100% + 8px); 
		margin-top: 0;
	}
	.site.ontop .search-submit {
		right:102px;
	}
	.home .site.ontop .search-toggle {
		top: -100px; 
	}
	.search-bar {
		top: 100%;
	}
	
}
@media screen and (max-width: 739px) and (orientation: landscape) {
	.sunn-logo {
		width: 200px;
	}
	.site.ontop .sunn-logo {
		width: 300px;
	}
	.home .site.ontop .sunn-logo {
		width: 63.5vw;
	}
	button.menu-toggle,
	.site.ontop button.menu-toggle {
		top: 12px;
		margin-top: 0;
	}
	.search-toggle,
	.site.ontop .search-toggle{
		top: 10px;
		margin-top: 0;
	}
	.site.ontop .main-navigation .sunn-logo {
		width: 230.769px;
	}
	
}


/* TABLET -------------------------- */
@media screen and (min-width: 740px) {
	.rplcmnt-header {
		height: 200px;
	}
	.home .rplcmnt-header {
		height: 180px;
	}
	a#enter {
		top: 120px;
	}

	/* branding */
	.sunn-logo {
		position: relative;
		width: 300px;
		left: 15px;
	}
	.main-navigation .sunn-logo,
	.site.ontop .main-navigation .sunn-logo {
		width: 250px;
		top: 0;
	}
	.header-bg {
		bottom: 2px;
	}
	.home .site.ontop .site-branding .wrap,
	.home .site.ontop .enter-site {
		height: 100vh;
		top: 0;
	}
	/* nav */
	.home .site.ontop .main-navigation {
		height: 0;
	}
	button.menu-toggle {
		right: 20px; top: 20px; 
	}
	.site.ontop button.menu-toggle {
		top: calc(100% + 11px); 
	}
	.home .site.ontop button.menu-toggle,
	.main-navigation.toggled button.menu-toggle {
		top: 20px; 
	}
	.search-toggle {
		right: 66px; top: 18px;
	}
	.site.ontop .search-toggle {
		top: calc(100% + 9px); 
	}
	.site.ontop .search-submit {
		right:160px;
	}
	.home .site.ontop .search-toggle {
		top: -100px; 
	}
	.search-bar {
		top: 100%;
	}
	
	
}

@media screen and (min-width: 740px) and (max-width: 899px) {
	.header-bg.full-width {
		display: none;
	}
	.main-navigation {
		left: 0; top: 0;
		height: 100%;
	}
	.site.ontop .sunn-logo {
		width: calc(100vw - 30px);
	}
	.home .site.ontop .sunn-logo {
		top: 50vh;
	}
	.main-navigation .sunn-logo, .site.ontop .main-navigation .sunn-logo {
    top: 0;
	}

	
}

/* DESKTOP -------------------------- */
@media screen and (min-width: 900px) {
	
	/* HEADER ---------------------------- */
	.site-header {
		height: 164px;
	}
	.site.ontop .site-header,
	.rplcmnt-header{
		height: 216px;
	}
	.home .rplcmnt-header {
		height: 282px;
	}
	.site-branding .header-bg {
		display: none;
	}
	
	/* branding*/
	.site-branding {
		height: 100%;
	}
	.sunn-logo {
		position: absolute;
		width: 500px;
	}
	.site.ontop .sunn-logo {
		width: 700px;
	}
	.home .site.ontop .sunn-logo {
		width: calc(100% - 30px);
		top: 55%;
	}
	
	/* nav */
	.main-navigation {
		left: 0; bottom: 34px;
		border-top: 1px solid #969696;
	}
	.home .site.ontop .main-navigation {
		bottom: -34px;
	}
	.site-header .search-toggle {
		display: none;
	}
	a#enter {
		top: 120px;
	}
	
}