:root{
--ttblue:#00CCFF;
--ttnavy:#004488;
--ttgold:#FFE568;
--ttgray:#e0dfe5;
}
@font-face {
    font-family: 'Lot';
    src: url('../fonts/lot-regular.woff2') format('woff2'),
         url('../fonts/lot-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{font-family: 'Source Sans Pro', sans-serif; transition: none; background-color:var(--ttgray);}

.tile{ width:100%; height:100%; font-size:3vmin; border-color:rgb(10,10,10,.1); border-width:0 thin thin 0; display:flex; align-content:center; justify-content: center; flex-direction: column; flex-wrap:wrap; padding:0 5vw 0 5vw;}
.tile label{font-size:6vmin; line-height:1; text-transform:capitalize; font-family:'Source Sans Pro',sans-serif; font-weight: 600; display: block; position: relative; width:100%;}
.tile h1, .tile .title{font-size:10vw; line-height: .9; margin:0; padding:0; display: block; font-weight: 700; font-family: 'Source Sans Pro',sans-serif; text-transform: uppercase; width:100%;}
.tile h2{font-size:6vw; line-height: .9;}
a.tile:hover{background-color: #FFF; transition: all .5s;}
.tile .caption{font-size: 4vmin;}
.grid.two-columns{grid-template-columns:50% 50%;}
.grid.foursquare{grid-template: 50% 50%/50% 50%;}



.bg-blue{background-color: var(--ttblue);}
.bg-navy{background-color: var(--ttnavy);}
.bg-gold{background-color: var(--ttgold);}
.text-blue{color:var(--ttblue);}
.text-navy{color:var(--ttnavy);}
.text-gold{color:var(--ttgold);}

#round-logo{width:4vw; position:absolute; top:4vw; right:4vw;}

#greeting{font-weight:bold; font-size:8vmin;}
#greeting h1{font-size: 24vmin; line-height: 1;}

#featured{background-blend-mode: darken; background-color: rgba(0, 0, 0, .65); background-image: url('https://whoarethem.com/resources/images/3arcoverart.jpg');}

#contact{}

footer{padding:8px 0;}


/* ROSTER - List of Tune Titan artists. */
#roster{width:100%; min-height:100%; display: grid; grid-template-columns: 50% 50%; grid-auto-rows: 100%; font-family:Roboto;}
.artist{width:100%; height:100%; display:grid; box-shadow: -10vw -15vw 40vw rgba(0,0,0,0) inset; background-size: 80%; grid-template-columns: 100%; grid-template-rows: 1fr auto; cursor:pointer;}
.artist .artist_info{bottom: 0; left:0; color:white; font-size:4vw; grid-row:2; padding:5vh 4vw; text-align: right; font-weight:bold;}
.artist:hover{background-size:90%;}





/*MOBILE VIEW - Adjust things to look great on mobile */
@media screen and (max-width:800px){
	.grid.two-columns{grid-template-columns: 100%;}
	.tile{text-align:center}
	.tile h1{font-size:14vw;}
	.tile h2{font-size:10vw;}
	#roster{grid-template-columns: 100%;}
	.artist .artist_info{font-size:10vw; text-align: center;}
	#round-logo{width:10vw;}
}