/* 
IMPORTANT: media query - switches on grid layout if page width is wider than 768px
--------------------------------------------------------------------------------------- */
@media (min-width: 768px) {

section { padding: 1rem 8rem 1rem 8rem }

/*  main page title after top navigation
--------------------------------------------------------------------------------------- */
h2 { 
	font-size: 40px;
	line-height: 1.15em;
	margin: 0rem 0rem 1rem;
	text-align: left;
	color: #3f532e
}


/*  custom section for CONTEXT
--------------------------------------------------------------------------------------- */
	section.video {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"hr";
	}
	
	video {
	border-radius:15px;
	}
	
	.shadow {
	box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
	}

section.video figure.hero		{ grid-area: hr; }


/*  custom section for CONTEXT
--------------------------------------------------------------------------------------- */
	section.context {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"hr hr hr hr hr hr hr hr hr hr hr hr"
	"h2 h2 h2 h2 h2 .. d2 d2 d2 d2 d2 .."
	"d1 d1 d1 d1 d1 .. d2 d2 d2 d2 d2 ..";
	}
	
	img {
	border-radius:15px;
	}
	
	.shadow {
	box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
	}

section.context figure.hero		{ grid-area: hr; padding: 0rem 0rem rem 0rem; }
section.context h2				{ grid-area: h2; }
section.context div1   			{ grid-area: d1; }
section.context div2  			{ grid-area: d2 !important; padding: 0; align-items: end; 

align-content: center; }

section.context div.two h3 { background: red;  }

/*  custom section for CHALLENGE
--------------------------------------------------------------------------------------- */
	section.challenge {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"hr hr hr hr hr hr hr hr hr hr hr hr"
	".. .. .. .. .. .. d2 d2 d2 d2 d2 .."
	".. .. .. .. .. .. d1 d1 d1 d1 d1 .."
	".. .. .. .. .. .. d3 d3 d3 d3 d3 .."
	".. .. .. .. .. .. d4 d4 d4 d4 d4 ..";
	}
	
	img {
	border-radius:15px;
	}
	
	.shadow {
	box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
	}

section.challenge figure.hero		{ grid-area: hr; padding: 0rem 0rem 1rem 0rem; }
section.challenge div1   			{ grid-area: d1; }
section.challenge div2   			{ grid-area: d2; }
section.challenge div3   			{ grid-area: d3; }
section.challenge div4   			{ grid-area: d4; }


/*  custom section for PROCESS
--------------------------------------------------------------------------------------- */
	section.process {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f1 f1 f1 f1 f1 f2 f2 f2 f2 f2 f2"
	"f3 f3 f3 f3 f3 f3 f4 f4 f4 f4 f4 f4"
	".. .. .. .. .. .. d2 d2 d2 d2 d2 .."
	".. .. .. .. .. .. d1 d1 d1 d1 d1 ..";
	}
	
	img {
	border-radius:15px;
	}
	
	.shadow {
	box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
	}

section.process figure.one		{ grid-area: f1; }
section.process figure.two		{ grid-area: f2; }
section.process figure.three	{ grid-area: f3; padding: 0rem 0rem 1rem 0rem; }
section.process figure.four		{ grid-area: f4; padding: 0rem 0rem 1rem 0rem; }
section.process div1   			{ grid-area: d1; }
section.process div2   			{ grid-area: d2; }


/*  custom section for EXPERIMENTATION
--------------------------------------------------------------------------------------- */
	section.experimentation {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"fb fb fb fb fb .. d1 d1 d1 d1 d1 .."
	"or or or or or .. d1 d1 d1 d1 d1 ..";
	}
	
	img {
	border-radius:15px;
	}
	
	.shadow {
	box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
	}

section.experimentation figure.flipbook		{ grid-area: fb; }
section.experimentation figure.orchestra	{ grid-area: or; }
section.experimentation div1   				{ grid-area: d1; }
section.experimentation div2   				{ grid-area: d2; }


/*  custom section for EXPERIMENTATION
--------------------------------------------------------------------------------------- */
	section.experimentationvideo {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 v1";
	}
	
	img {
	border-radius:15px;
	}
	
	.shadow {
	box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
	}

section.experimentationvideo figure.one		{ grid-area: f1; }
section.experimentationvideo figure.two		{ grid-area: v1; }


/*  custom section for EXPERIMENTATION
--------------------------------------------------------------------------------------- */
	section.left {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f1 f1 f1 f1 .. d1 d1 d1 d1 d1 .."
	"f2 f2 f2 f2 f2 .. d2 d2 d2 d2 d2 .."
	"f3 f3 f3 f3 f3 .. d3 d3 d3 d3 d3 ..";
	}
	
	img {
	border-radius:15px;
	}
	
	.shadow {
	box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
	}

section.left figure.one		{ grid-area: f1; }
section.left figure.two		{ grid-area: f2; }
section.left figure.three	{ grid-area: f3; }
section.left div1   		{ grid-area: d1; }
section.left div2   		{ grid-area: d2; }
section.left div3   		{ grid-area: d3; }

/*  custom section for EXPERIMENTATION
--------------------------------------------------------------------------------------- */
	section.leftonediv {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f1 f1 f1 f1 .. d1 d1 d1 d1 d1 .."
	"f2 f2 f2 f2 f2 .. d1 d1 d1 d1 d1 ..";
	}
	
	img {
	border-radius:15px;
	}
	
	.shadow {
	box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
	}

section.leftonediv figure.one		{ grid-area: f1; }
section.leftonediv figure.two		{ grid-area: f2; }
section.leftonediv div1   		{ grid-area: d1; }



/*  custom section for IMAGES
--------------------------------------------------------------------------------------- */
	section.images {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f1 f1 f1 f1 f1 f1 f1 f1 f1 f1 f1"
	"f2 f2 f2 f2 f2 f2 f3 f3 f3 f3 f3 f3"
	"f4 f4 f4 f4 f4 f4 f5 f5 f5 f5 f5 f5"
	".. .. .. .. .. .. d1 d1 d1 d1 d1 .."
	".. .. .. .. .. .. d2 d2 d2 d2 d2 ..";
	}
	
	img {
	border-radius:15px;
	}
	
	.shadow {
	box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
	}

section.images figure.one		{ grid-area: f1; }
section.images figure.two		{ grid-area: f2; }
section.images figure.three		{ grid-area: f3; }
section.images figure.four		{ grid-area: f4; }
section.images figure.five		{ grid-area: f5; }
section.images div1 			{ grid-area: d1; }
section.images div2   			{ grid-area: d2; }


/*  custom section for IMAGES
--------------------------------------------------------------------------------------- */
	section.audio {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"a1 a1 a1 a2 a2 a2 a3 a3 a3 a4 a4 a4";
	}
	
	img {
	border-radius:15px;
	}
	
	.shadow {
	box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
	}

section.audio figure.one		{ grid-area: a1; }
section.audio figure.two		{ grid-area: a2; padding: 0rem 0rem 1rem 0rem; }
section.audio figure.three		{ grid-area: a3; padding: 0rem 0rem 1rem 0rem; }
section.audio figure.four		{ grid-area: a4; padding: 0rem 0rem 1rem 0rem; }


/*  custom section for AFTER EFFECTS
--------------------------------------------------------------------------------------- */
	section.aftereffects {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f1 f1 f1 f1 .. d1 d1 d1 d1 d1 .."
	"f2 f2 f2 f2 f2 .. d2 d2 d2 d2 d2 ..";
	}
	
	img {
	border-radius:15px;
	}
	
	.shadow {
	box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
	}

section.aftereffects figure.one			{ grid-area: fb; }
section. aftereffects figure.two		{ grid-area: or; }
section.aftereffects div1   			{ grid-area: d1; }
section.aftereffects div2   			{ grid-area: d2; }

/*  custom section for CONTEXT
--------------------------------------------------------------------------------------- */
	section.twovideos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f2";
	}
	
	video {
	border-radius:15px;
	}
	
	.shadow {
	box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
	}

section.video figure.one		{ grid-area: f1; }
section.video figure.two		{ grid-area: f2; }


/*  custom section for REFLECTION
--------------------------------------------------------------------------------------- */
	section.reflection {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"hr hr hr hr hr hr hr hr hr hr hr hr"
	"h2 h2 h2 h2 h2 .. .. .. .. .. .. .."
	"d1 d1 d1 d1 d1 .. .. .. .. .. .. .."
	"d2 d2 d2 d2 d2 .. d3 d3 d3 d3 d3 ..";
	}
	
	img {
	border-radius:15px;
	}
	
	.shadow {
	box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
	}

section.reflection figure.hero		{ grid-area: hr; padding: 0rem 0rem 1rem 0rem; }
section.reflection h2				{ grid-area: h2; }
section.reflection div1   			{ grid-area: d1; }
section.reflection div2   			{ grid-area: d2; }
section.reflection div3   			{ grid-area: d3; }


/*  custom section for BIBLIOGRAPHY
--------------------------------------------------------------------------------------- */
section.bibliography {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"p1 p1 p1 p1 p1 p1 p1 p1 p1 p1 p1 p1"
	"dv dv dv dv dv dv dv dv dv dv dv dv";
	}


section.bibliography p   			{ grid-area: p1; color: #3f532e; }
section.bibliography div    		{ grid-area: dv; }


.bibliography > input[type="checkbox"] {
  position: absolute;
  left: -100rem;
}

.bibliography .content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.3s ease;
}

.bibliography > input[type="checkbox"]:checked ~ .content {
  height: auto;
  overflow: visible;
}


.bibliography > input[type="checkbox"]:checked ~ .content {
  padding: auto;
  border-top: 0;
}

.bibliography .handle {
  margin: 0;
  font-size: 18px;
  line-height: 1.2em;
}

.bibliography .handle label:after {
  font-family: opensans-light;
  content: "↑";
  display: auto;
  margin-right: auto;
  font-size: 18px;
  line-height: 1.556em;
  vertical-align: middle;
}

.bibliography > input[type="checkbox"]:checked ~ .handle label:after {
  content: "↓";
}


/*  custom section for REFLECTION
--------------------------------------------------------------------------------------- */
	section.lushreflection {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"h2 h2 h2 h2 h2 .. .. .. .. .. .. .."
	"d1 d1 d1 d1 d1 .. .. f1 f1 f1 f1 f1";
	}
	
	img {
	border-radius:15px;
	}
	
	.shadow {
	box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 0.2);
	}
	
	
section.lushreflection figure.one		{ grid-area: f1; padding: 0rem 0rem 1rem 0rem; }
section.lushreflection h2				{ grid-area: h2; }
section.lushreflection div   			{ grid-area: d1; }