/* 
 *  Classes here are utilities to impose different structural behaviour
 *  
 *  There are two main breakpoints used in these style sheets:
 *  	*		mobile		max  640px
 *  	*		small			max 1100px
 *  	*		desktop		min 1100px
 */


/* These content classes are designed to hold the main content of the page
 *  content and content-narrow restrict to the middle 80% of the page at 1400px
 *  	smoothly scaling up to the middle 99% of the page at 400px;
 *  
 *  content has a maximum width of 1800px
 *  content-narrow has a maximum width of 1200px
 *  
 *  content-full is 100% of the page width at all times with no max width
 */

body{
	overflow-x: hidden;
}

.content{
	max-width:1800px;
	width: 99%;
	margin: 0 auto;
}

.content-narrow{
	max-width:1200px;
	width: 99%;
	margin: 0 auto;
}

.content-full{
	width: 100%;
	margin: 0 auto;
}

@media screen and (min-width: 400px){
	.content, .content-narrow{
		/* this calculation is similar to the one found in fluidType.css
		 *	  min-width 	+ (  max-width	-   min-width ) * (100vw - min-screen-size) / (max-screen-size - min-screen-size)
		 		(0.99 * 400)	+ ((0.8 * 1400)	- (0.99 * 400)) * (100vw -      400       ) / (     1400       -      400       )
		 		     396px    + (   1120      -     396     ) * (100vw -      400       ) /                1000
		 */
		width: calc(396px + 724 * (100vw - 400px) / 1000);
	}
}

@media screen and (min-width: 1400px){
	.content, .content-narrow{
		width: 80%;
	}
}

@media(min-width: 1500px){
	.no-max-width{
		max-width: none;
	}
}

.fix-to-bottom-of-viewport{
	position: fixed;
	bottom: 0;
}

/******************************/




/* flex containers should be one of flex-h or flex-v (horizontal or vertical)
 *  depending on the default direction of the flow of the flex items 
 *  for more information on flex box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 *  
 *  at time of writing, the -webkit- prefix is stil necessary to ensure compatibility with mobile safari
 */
.flex-h{
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;

	justify-content: space-around;
	align-items: stretch;
	align-content: stretch;

	padding: 0.5em;
}

.flex-v{
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: column nowrap;
	flex-flow: column nowrap;

	justify-content: space-around;
	align-items: stretch;
	align-content: stretch;

	padding: 0.5em;
}

/* Default style for all flex items */
.flex-h > *,
.flex-v > *{
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;

	align-self: auto;

	margin: 0.5rem;
}

.flex-v > [class*=-Field]:first-of-type ~ [class*=-Field]{
	margin-top: 0;
}

.flex-h > .flex-h,
.flex-v > .flex-h,
.flex-h > .flex-v:not(.card),
.flex-v > .flex-v:not(.card){
	padding: 0;
}

.flex-h > .flex-h:not(.flex-wrap) > *,
.flex-v > .flex-h:not(.flex-wrap) > *{
	margin: 0 0.5em;
}

.flex-h > .flex-h:not(.flex-wrap) > *:first-child,
.flex-v > .flex-h:not(.flex-wrap) > *:first-child{
	margin-left: 0;
}

.flex-h > .flex-h:not(.flex-wrap) > *:last-child,
.flex-v > .flex-h:not(.flex-wrap) > *:last-child{
	margin-right: 0;
}

.flex-h > .flex-v:not(.flex-wrap) > *,
.flex-v > .flex-v:not(.flex-wrap) > *{
	margin: 0.5em 0;
}

.flex-h > .flex-v:not(.flex-wrap) > *:first-child,
.flex-v > .flex-v:not(.flex-wrap) > *:first-child{
	margin-top: 0;
}

.flex-h > .flex-v:not(.flex-wrap) > *:last-child,
.flex-v > .flex-v:not(.flex-wrap) > *:last-child{
	margin-bottom:;
}


.flex-h > *.collapse,
.flex-v > *.collapse{
	position: relative;
	transition: all 0.2s;

	flex: 1 0 auto !important;
	width: auto;
	height: auto;

	cursor: pointer;
}

.flex-h > *.collapse.vertical,
.flex-v > *.collapse{
	flex: 0 0 auto !important;
	display: flex;
}

/*.collapsible-content{
	overflow-y: hidden;
	max-height: 1000px;

	transition: all 0.2s;
}

.flex-h > *.collapse .collapsible-content,
.flex-v > *.collapse .collapsible-content{
	max-height: 0;
	opacity: 0;
}*/

.flex-h > *.collapse.vertical .title{
	flex-flow: column nowrap;
}

.flex-h > *.collapse.vertical .title > span{
  writing-mode: vertical-rl;
  transform: rotateZ(180deg);
  
}

/*.min-max-icon{
	position: absolute;
	top: 1.5em;
	right: 1.5em;
}

.collapse.vertical .min-max-icon{
	top: inherit;
	bottom: 1em;
	right: 2.3em;
}*/

.svg-icon-plus{
	flex: 0 0 auto;
	position: relative;
	cursor: pointer;
}



/* the following classes are modifiers to the flex container
 */
.flex-wrap{
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

@media screen and (max-width: 1100px){ /* SMALL */
	.flex-h{
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.flex-h-small{
		-webkit-flex-direction: row;
		flex-direction: row;
	}

	.flex-space-between-small{
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
}

.flex-wrap-reverse{
	-webkit-flex-wrap: reverse;
	flex-wrap: reverse;
}

.flex-space-around{
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

.flex-space-between{
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.flex-justify-start{
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}

.flex-justify-end{
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

.flex-align-content-start{
	-webkit-align-content: flex-start;
	align-content: flex-start;	
}

.flex-align-items-center{
	-webkit-align-items: center;
	align-items: center;
}

.flex-align-items-start{
	-webkit-align-items: flex-start;
	align-items: flex-start;
}

.flex-align-items-end{
	-webkit-align-items: flex-end;
	align-items: flex-end;
}

/* modifies flex items to disable growing */
.flex-no-grow  > *,
.flex-item-no-grow{
	-webkit-flex-grow: 0 !important;
	flex-grow: 0 !important;
}
/***************/

/* flexbox allows us to change the order of flex items,
 *  these classes are only applied on the desktop and rearrange flex items from their order in the DOM
 */
@media screen and (min-width: 1101px){ /* DESKTOP */
	.flex-h > .column-1,
	.flex-v > .column-1{
		order: 1;
	}
	
	.flex-h > .column-2,
	.flex-v > .column-2{
		order: 2; 
	}
	
	.flex-h > .column-3,
	.flex-v > .column-3{
		order: 3; 
	}

	.flex-item-no-grow-desktop{
		-webkit-flex-grow: 0 !important;
		flex-grow: 0 !important;
	}
}




/* Text blocks
 *  combined with the font-sizes in fluidType.css, this class maintains a comfortable line length for a container
 *  
 *  There are 8 different sizes of text block defined here, each as text-block-x
 *  	where xxx is the 'flex-basis' size (the size of the container before flex-blox grows or shrinks anything)
 *  	xxx is also set as the max width of any paragraph (p) elements inside the text-block
 *  
 *  text-block or text-block-1200 is the largest of these and uses the full font-size,
 *  subsequent, smaller text blocks adjust the font-size to compensate for the lack of width
 *  
 *  these classes are also used in fluidType.css to scale the header sizes inside each size of text-block fluidly
 */

/* this style is applied to *all* text blocks */
[class*="text-block"],
text-block-1200{
	-webkit-flex: 1 1 1200px;
	flex: 1 1 1200px;
}

[class*="text-block"] p,
text-block-1200 p{
	max-width:1200px;
}

@media screen and (min-width: 400px){
	.text-block-960{
		-webkit-flex: 1 1 auto;
		flex: 1 1 auto;
	}
	
	.text-block-960 p{
		max-width: 960px
	}
	
	.text-block-840{
		-webkit-flex: 1 1 auto;
		flex: 1 1 auto;
	}
	
	.text-block-840 p{
		max-width: 900px
	}
	
	.text-block-720{
		-webkit-flex: 1 1 auto;
		flex: 1 1 auto;
	}
	
	.text-block-720 p{
		max-width: 840px
	}
	
	.text-block-600{
		-webkit-flex: 1 1 auto;
		flex: 1 1 auto;
	}
	
	.text-block-600 p{
		max-width: 780px
	}
	
	.text-block-480{
		-webkit-flex: 1 1 auto;
		flex: 1 1 auto;
	}
	
	.text-block-480 p{
		max-width: 720px
	}
	
	.text-block-360{
		-webkit-flex: 1 1 auto;
		flex: 1 1 auto;
	}
	
	.text-block-360 p{
		max-width: 660px
	}
	
	.text-block-240{
		-webkit-flex: 1 1 auto;
		flex: 1 1 auto;
	}
	
	.text-block-240 p{
		max-width: 600px
	}
}
/****************/



/* Hide and show elements based on screen size */
.mobile-only{
	display: none;
}

@media screen and (max-width: 640px){ /* MOBILE */
	.mobile-hide{
		display: none !important;
	}

	
	.mobile-only{
		display: block;
	}
}