/* Snowcastle Valley version 2.0.1 - 2020-04-23 */


/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
html	{ font-size: 64%; }

/* the grids */
	.span_full_width {width: var(--span_12_of_12);}
	.span_spacing_left {width: var(--span_4_of_12);}
	.span_main_content {width: var(--span_4_of_12);}
	.span_spacing_right {width: var(--span_4_of_12);}

}


/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {

html	{ font-size: 62.5%; }
 
/* the grids */
	.span_full_width {width: var(--span_12_of_12);}
	.span_spacing_left {width: var(--span_3_of_12);}
	.span_main_content {width: var(--span_6_of_12);}
	.span_spacing_right {width: var(--span_3_of_12);}

}


/*
  ##Device = ALL MOBILE DEVICES
  ##Screen - FUNDAMENTAL HEADING ELEMENTS for everything below 1024px wide
*/ 
 @media (max-width: 1024px) {
	 
/* the logo */
	.logo {
		float:left;
	}
	.logo-image{
		width: 66.33%;
		height:90%;
	}

/* the menu */
	nav {
		float:right;
	}

	nav label {
		display: inline-block;
		color: var(--color-general-light);
		background: var(--color-general-medium);
		font-style: normal;
	}

 	nav ul {
		position:fixed;
		margin-left:-90%;
		width:100%;
		background: var(--color-brand-dark);
	}
		
	nav ul li {
		display: block;
		font-size:1.6rem;
		text-align:right;
		padding-right:10%;
		border-top: 1px solid var(--color-brand-light);
	}
		
  /* Toggle show/hide menu on checkbox click */
	nav ul {
		display: none;
	}

	nav input:checked ~ ul {
		display: block;
	}
}


/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
  
html	{ font-size: 56%; } 

/* the grids */
	.span_full_width {width: var(--span_12_of_12);}
	.span_spacing_left {width: var(--span_2_of_12);}
	.span_main_content {width: var(--span_8_of_12);}
	.span_spacing_right {width: var(--span_2_of_12);}

 /* the logo */
	.logo {
		width:90%;
		height: var(--vspacer_1pt75_of_body);
	}
	.logo-image{
		width: 66.33%;
		height:90%;
	}

/* the mobile menu */

	nav {
		width:10%;
		height: var(--vspacer_1pt75_of_body);
	}
	
	nav label {
		font-size: 2.1rem;
		padding:1rem 0.8rem 0 0.8rem;
	}
	
	nav ul {
		top: var(--vspacer_1pt75_of_body);
	}
	
/* the modal popups */
	.modal-content{
	width: 66.66%;
	}
}


/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  //CSS
  
}


/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
  
html	{ font-size: 48%; } 

/* the grids */
	.span_full_width {width: var(--span_12_of_12);}
	.span_spacing_left {width: var(--span_1_of_12);}
	.span_main_content {width: var(--span_10_of_12);}
	.span_spacing_right {width: var(--span_1_of_12);}

/* the logo */
	.logo {
		width:90%;
		height: var(--vspacer_1pt5_of_body);
	}

	.logo-image{
		height:90%;
	}
	
 /* the mobile menu */
	nav {
		width:10%;
		height: var(--vspacer_1pt5_of_body);
	}

	nav label {
		font-size: 2rem;
		padding:0.5rem 0.8rem 0 0.8rem;
	}
	
	nav ul {
		top: var(--vspacer_1pt5_of_body);
	}

/* the modal popups */
	.modal-content{
	width: 75%;
	}  
}


/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
  
html	{ font-size: 42%; }

/* the grids */
	.span_full_width {width: var(--span_12_of_12);}
	.span_spacing_left {width: var(--span_0pt5_of_12);}
	.span_main_content {width: var(--span_11_of_12);} 
	.span_spacing_right {width: var(--span_0pt5_of_12);}

/* the logo */
	.logo {
		width:90%;
		height: var(--vspacer_1pt5_of_body);
	}
 
 /* the mobile menu */
	nav {
		width:10%;
		height: var(--vspacer_1pt5_of_body);
	}
	
	nav label {
		font-size: 2rem;
		padding:0.5rem 0.8rem 0 0.8rem;
	}
	
		nav ul {
		top: var(--vspacer_1pt5_of_body);
	}

/* the modal popups */
	.modal-content{
	width: 75%;
	}  
}