/*****************************************************************************/
/** Spherworks styling																											**/
/** Version 3.1 - Maevanin																									**/
/** Gijs Rosengarten, 2021																									**/
/** http://sphereworks.gwtp.net																							**/
/*****************************************************************************/


/***************************************/
/********** 	Photo effects	 ***********/
.photoWipe { position: relative; width: 100%; max-height: 400px; }
.photoWipe img { object-fit: cover; height: 400px; width: 100%; object-position: top;}
.photoWipe .show { z-index: 1; clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); transition: clip-path 0.5s ease-in-out;; }
.photoWipe .hidden { z-index: 0; position: absolute; top: 0; width: 100%; height: auto; clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%); transition: clip-path 0.5s ease-in-out;; }
.photoWipe .hidden::before { position: absolute; top: 0; left: 100%; height:calc(100% - 3px); background: #E1141D; mix-blend-mode: multiply; opacity: 0; content: ""; width: 30px; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .5s ease-in-out; }
.photoWipe:hover .show { clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%); transition: clip-path 0.5s ease-in-out;; }
.photoWipe:hover .hidden { clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); transition: clip-path 0.5s ease-in-out;; }
.photoWipe:hover .hidden::before { left: 0; opacity: 0.8; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .5s ease-in-out; }


/***************************************/
/********** 	Program table	 ***********/
.gridTable { display: grid; grid-template-columns: 8em 1fr 1fr 1fr; grid-template-rows: auto auto repeat(2, minmax(5em, 1fr)); gap: 0 2em; grid-auto-flow: column; }
.gridTable .item.mobile { display: none; }
.gridTable .item { display: flex; justify-content: left; align-items: top; padding: 0 1.5em 2em 1.5em; flex-direction: column; }
.gridTable .spacer, .gridTable .time.spacer { height: 2em; min-height: 2em; }
.gridTable .spacer:after, .gridTable .time.spacer:after, .gridTable .item.time.last:after { background: none; height: 0; }
.gridTable .GTheader, .gridTable .time.GTheader { position: sticky; top: 120px; z-index: 10; justify-content: center; text-align: center; padding: 1.5em; }
.gridTable .GTheader:before { position: absolute; top: -20px; left: 0; height: 20px; width: 100%; background-color: #FFFFFF; content: "";}
.gridTable .GTheader:after, .gridTable .item.time.GTheader:after { position: absolute; top: 100%; left: 0; height: 20px; width: 100%; background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%); content: ""; }
.gridTable .time.GTheader { background: #FFFFFF; }
.gridTable .time { grid-column: 1; background: #FFFFFF; padding: 0;  position: relative; min-height: 9em; }
.gridTable .time div { display: inline-block; background: #EDF1F6; width: 8em; height: 8em; padding: 1em; display: flex; align-items: center; justify-content: center; }
.gridTable .time span { font-size: 1.6em; }
.gridTable .time:after { content: ""; background: #EDF1F6; width: 4px; height: calc(100% - 8em); position: relative; left: 50%; margin-left: -2px; display: inline-block }
.gridTable .time.empty:after { height: 100%; }
.gridTable .sessionType { text-decoration: none; margin: 0 0 0px -15px; width: calc(100% + 30px); padding: 20px; border: 2px solid #EDF1F6; position: relative; height: 100%; color: #6D6F6F; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; }
.gridTable .sessionType:hover { box-shadow: 5px 5px 15px rgba(0,0,0,0.1); cursor: pointer; cursor: hand; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; position: relative; }
.gridTable .sessionType:before { content: ""; position: absolute; top: 30px; left: 0; transform: rotate(-45deg); width: 15px; height: 15px; background: #FFFFFF; border-left:  2px solid #EDF1F6; border-top:  2px solid #EDF1F6; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out;}
.gridTable .sessionType:hover:before { content: ""; position: absolute; top: 30px; left: -9px; transform: rotate(-45deg); width: 15px; height: 15px; background: #FFFFFF; border-left:  2px solid #EDF1F6; border-top:  2px solid #EDF1F6; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out;}
.gridTable .sessionType:after { content: ""; position: absolute;  right: 0; top: 0; width: 0px; height: 0%; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; }
.gridTable .sessionType:hover:after { width: 10px; height: 100%; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; }
.gridTable .sessionType span { display: block; position: relative; }
.gridTable .sessionType span:before { content: ""; position: absolute; top: 0; left: -20px; height: 100%; min-height: 30px; width: 15px; background: #FFFFFF; }
.gridTable .trackA { grid-column: 2; }
.gridTable .trackA .sessionType:after { background: #203A59; }
.gridTable .trackB { grid-column: 3; }
.gridTable .trackB .sessionType:after { background: #5E799A; }
.gridTable .trackC { grid-column: 4; }
.gridTable .trackC .sessionType:after { background: #B5C2D1; }

.gridTable .title { font-size: 1.8em; font-weight: 400; color: #203A59; }
.gridTable .duration, .gridTable .speaker, .gridTable .tags { font-size: 1.4em; }
.gridTable .duration + .title, .gridTable .speaker + .title, .gridTable .tags + .title { margin-top: 1.5em; }


/***************************************/
/********** Responsive styles **********/

@media (max-width: 1340px) {
}

/* Large desktop and up */
@media (min-width: 960px) {
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 960px) and (max-width: 1199px) {
}

/* Tablet and down */
@media (max-width: 959px) {
	.gridTable { display: grid; grid-template-columns: 80px 1fr; grid-template-rows: initial; }
	.gridTable .item.mobile { display: block; }
	.gridTable .item.desktop { display: none; }
	.gridTable .item.last { margin-bottom: 30px; position: relative;}
	.gridTable .item.last:after { content: ""; background: #FFFFFF; width: calc(100% + 4px); height: 30px; display: inline-block; position: absolute; bottom: -30px; left: -2px; }
	.gridTable .trackA, .gridTable .trackB, .gridTable .trackC { grid-column: 2; }
}

/* Small screens column setup */
@media (min-width: 768px) and (max-width: 959px) {
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
}
@media (min-width: 481px) and  (max-width: 767px) {
	/* Define extra small colums */
}

/* Landscape phones and down */
@media (max-width: 480px) {
	
}