/* Custom page CSS
-------------------------------------------------- */



/* tech school colours */
.watermelon{color: #eb4570;}
.watermelon-dark{color: #d12551;}
.apricot{color: #fdcf6c;}
.apricot-reverse{color: #fdcf6c;}
.green-dark{color: #0bbc85;}
.green-reverse{color: #2dd6a1;}
.blue-light{color: #228cb1;}
.navy{color: #0c3c4c;}
.black{color: #100b00;}
.grey{color: #615e59;}
.grey-light{color: #b5b2ae;}


@import url('https://fonts.googleapis.com/css?family=Lato:300,400,900');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap');


body{background:#fff;}

.container {
  width: auto;
  max-width: 768px;
  padding: 0 15px;
}


/*Set all links, why not?*/
a:not(.btn){color: #228cb1;}
a:not(.btn):hover{color: #d12551;}


main{padding-bottom: 5rem;}

header{position: relative; padding-left: 9rem; margin-bottom: 2rem}

.ts_bolt{width: 6rem; height: 6rem; display: block; position: absolute; top:2rem; left: 1.5rem;}
.ts_bolt path {fill: #eb4570; fill-rule: evenodd;}

.footer {background: #f5f5f5; position: sticky; bottom: 0;}

.footer p{margin: 0;}
.footer a{display: block; font-size: 1.5rem; text-align: center; color: #d12551;}

.footer a i{margin-right: .5rem}


h1{font-family: 'Merriweather', serif;}
p,
h1 small{font-family: 'Lato', sans-serif;}


h1{font-weight: 900; margin-top: 2rem;}
h1 small{color: #b5b2ae; display: block; font-size: 1.4rem;}


/*the trailer*/
.ts-trailer{margin: 0 0 1rem;}


/*list of things*/
.ts-iclist{margin: 3rem 0; background:#f5f5f5; border-radius: .5rem; padding: 1.5rem;}
.ts-iclist > h4{color: #b5b2ae; text-transform: uppercase; font-size: 1.1rem; letter-spacing: 1px;}

.ts-icitem{margin: 1rem 0 1.5rem; border:2px solid #fff; background:#fff; position: relative; display: block; text-decoration: none; padding: 1rem 3rem 1rem 7.5rem; border-radius: .5rem;}
.ts-icitem:last-child{margin-bottom: 0;}
.ts-icitem .ts-icicon{font-size: 3rem; position: absolute; top:0; left: 0; padding: 1.5rem; display: block; width: 6rem; background:transparent; border-radius: .75rem; text-align: center;}
.ts-icitem h3{text-decoration: underline;}
.ts-icitem h3 i{position: absolute; top:1rem; right: 1rem; opacity: 0; font-size:1.2rem; color:#b5b2ae;}
.ts-icitem p{margin-bottom: 0; color: #b5b2ae;}

.ts-icitem:hover{ text-decoration: none; border-color: #eee}
.ts-icitem:hover p{color: #615e59;}

.ts-icitem:hover h3{text-decoration: none;}
.ts-icitem:hover h3 i{opacity: 1;}


.ts-icitem.heroic,
.ts-icitem.heroic:hover{background-color: #eb4570; border-color: #eb4570; color: #fff;}
.ts-icitem.heroic h3 i{color: #fff;}
.ts-icitem.heroic p{color:#fff;}
.ts-icitem.heroic:hover{background:#d12551;}





@media (max-width: 768px) {

	header{padding: 00;}
	.ts_bolt{width: 3rem; height: 3rem; left: 0; top:3rem;}
	header h1{padding: 1rem 0 1rem 4rem; margin:0;}

	.ts-iclist{border-radius: 0; margin:1rem -1rem;}

	.ts-icitem{padding-left: 4rem;}
	.ts-icitem .ts-icicon{width:2.5rem; font-size:1.3rem;}


	footer{display: none;}

}