/*****************************************************************************/
/** 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; transition: clip-path 0.5s ease-in-out; }
.photoWipe .hidden { z-index: 0; position: absolute; top: 0; width: 100%; height: auto; transition: clip-path 0.5s ease-in-out; }
.photoWipe:hover .show { transition: clip-path 0.5s ease-in-out; }
.photoWipe:hover .hidden { transition: clip-path 0.5s ease-in-out; }

.photoWipe.rtol .show { clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); }
.photoWipe.rtol .hidden { clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%); }
.photoWipe.rtol .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.rtol:hover .show { clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%); }
.photoWipe.rtol:hover .hidden { clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); }
.photoWipe.rtol: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; }

.photoWipe.ltor .show { clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); }
.photoWipe.ltor .hidden { clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%); }
.photoWipe.ltor .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.ltor:hover .show { clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%); }
.photoWipe.ltor:hover .hidden { clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); }
.photoWipe.ltor: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; }

.photoWipe.circle .show { clip-path: circle(100% at 50% 50%); }
.photoWipe.circle .hidden { clip-path: circle(0% at 50% 50%); }
.photoWipe.circle .hidden::before { background: none; }
.photoWipe.circle:hover .show { clip-path: circle(50% at 50% 50%); }
.photoWipe.circle:hover .hidden { clip-path: circle(100% at 50% 50%); }


/***************************************/
/********** 	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: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; font-size: 1.4em; padding: 0 0 0 20px; }
.gridTable .sessionType span:before { position: absolute; top: 0; left: 0px; height: 100%; font-weight: 600; }
.gridTable .sessionType .title { font-size: 1.8em; font-weight: 400; color: #203A59; padding: 0; }
.gridTable .duration:before { content: "D"; }
.gridTable .speaker:before { content: "S"; }
.gridTable .tags:before { content: "T"; }
.gridTable .trackA { grid-column: 2; }
.gridTable .trackA .sessionType:after { background: #BB3805; }
.gridTable .trackB { grid-column: 3; }
.gridTable .trackB .sessionType:after { background: #154C73; }
.gridTable .trackC { grid-column: 4; }
.gridTable .trackC .sessionType:after { background: #DFB245; }
.gridTable .title + .duration, .gridTable .title + .speaker, .gridTable .title + .tags { margin-top: 1.5em; }
.trackA.T1 { grid-column: 2 / span 2; grid-row: 3 / span 1;}
.trackC.T3 { grid-column: 4 / span 1; grid-row: 5 / span 2;}


/***************************************/
/******** Icons animations	************/
.icon-table { display:flex; justify-content: space-between; }
.icon-table > div { text-align:center; flex-grow: 1; flex-basis: 0; position: relative; }
.icon-table .canvas { max-width: 72px; height: 72px; padding-top: 0%; margin: 0 auto; }

/***************************************/
/********** 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; }
	.trackA.T1 { grid-column: 2 / span 1; grid-row: 3 / span 1;}
	.trackC.T3 { grid-column: 2 / span 1; grid-row: initial;}
}

/* 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) {

}