:root {
     --width: 300px;
     --height: 250px;
}
/* @font-face {
     font-family: name;
     src: url("path");
} */
.abs{position:absolute;}
.rel{position:relative;}
.flex{display:flex;}
.center{align-items: center;justify-content: center;}
.col{flex-direction: column;}
.row{flex-direction: row;}
.fullSize{width:var(--width);height:var(--height);left:0px;top:0px;}
#guide{opacity:0.5;}

#frame1ImageContent,
#frame1Image2Content,
#team1ColorBG,
#team2ColorBG,
#team1Mask,
#team2Mask{width:150px;height:250px;}

#team1Mask,#team2Mask{overflow: hidden;}

#frame1Image3Content,
#frame1Image4Content{width:240px;height:240px;}

#frame1ImageContent,#team1ColorBG,#team1Mask{left:0px;top:0px;}
#frame1Image2Content,#team2ColorBG,#team2Mask{left:150px;top:0px;}
#frame1Image3Content,#frame1Image4Content{left:-45px;top:5px;}
/* #frame1Image4Content{left:105px;top:5px;} */
#logoContainer{width:300px;height:78px;left:0px;top:12px;}
#logoContent{max-width:166px;height:78px;}

#CTAStack{width:158px;height:47px;left:71px;top:189px;}
#ctaTextContainer{width:auto;height:24px;margin-bottom:10px;}
#ctaTextParent{width:100%;height:24px;border-radius: 5px;}
#ctaTextContent{
     font-family: 'Chivo', sans-serif;
     font-style: normal;
     font-weight: 900;
     line-height: normal;
     font-size:14px;
     text-align: center;
     color:white;
     margin:4px 10px 4px 16px;
     left:-1px;
}
#frame2ImageContent,#frame2ImageContent2{max-width:148px;max-height:13px;}

#ScheduleStack{width:97px;height:57px;left:102px;top:183px;}
#frame2Subheadline2Container{width:97px;height:21px;margin-bottom:-1px;}
#frame2Subheadline2Content{
     color: #000;
     text-align: center;
     font-family: 'Chivo', sans-serif;
     font-size: 18px;
     font-style: normal;
     font-weight: 900;
     line-height: normal;     
}
#frame2Subheadline3Container{width:97px;height:21px;margin-bottom:3px;}
#frame2Subheadline3Content{
     color: #000;
     text-align: center;
     font-family: 'Chivo', sans-serif;;
     font-size: 18px;
     font-style: normal;
     font-weight: 300;
     line-height: normal;  
     top:-1px;
}

#SponsorStack{width:271px;height:83px;left:15.5px;top:98px;}
#dividerContainer{width:269px;height:1px;margin-top:1px;margin-bottom:1px;top:-0.5px;}
#frame2SubheadlineContainer {width:130px;max-height:16px;margin-bottom:9px;left:1px;}
#frame2SubheadlineContent{
     color: #000;
     text-align: center;
     font-family: 'Chivo', sans-serif;;
     font-size: 8px;
     font-style: normal;
     font-weight: 700;
     line-height: 100%;
     left:-1px;
}
#frame2HeadlineContainer,#frame2Headline2Container {max-width:271px;height:27px;}
/* #frame2HeadlineContainer{margin-bottom:5px;} */
#frame2HeadlineContent,#frame2Headline2Content{
     color: #000;
     font-family: 'Chivo', sans-serif;
     font-size: 23px;
     font-style: italic;
     font-weight: 900;
     line-height: normal;
     text-align: center;
     text-transform: uppercase;
}
#frame2HeadlineContent{top:-1px;}
.teamRank {
     position:relative;
     color: #000;
     text-align: center;
     font-family: 'Chivo', sans-serif;
     font-size: 0.652em;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     left:-1px;
}

/* intro animation */

#frame0Container {
     width: 300px;
     height: 250px;
     background-color: #000000;
}

#ball-img-wrapper {
     width: 46px;
     height: 58px;
     position: absolute;
     left: 130px;
     top: 96px;
}

#ball-img {
     width: 42px;
     height: 41px;
     position: absolute;
     left: 3px;
     top: 8px;
}

#for_clippath {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 1px;
     top: 0px;
}

#for_clippath {
     clip-path: polygon(0% 0%, 53% 0%, 53% 100%, 0% 100%);
     background-color: #000000
}

#line {
     width: 3px;
     height: 58px;
     background-color: white;
     position: absolute;
     left: 22px;
     top: 0px;
}

#half-black {
     width: 23px;
     height: 58px;
     position: absolute;
     left: 0px;
     top: 0px;
     background-color: black;
}

#text-img-container {
     width: 113px;
     height: 38px;
     position: absolute;
     left: 102px;
     top: 98px;
}

#espn-text-img {
     width: 42px;
     height: 10px;
     position: absolute;
     left: 0px;
     top: 0px;
}

#menscollege-text-img {
     width: 113px;
     height: 23px;
     position: absolute;
     left: 0px;
     top: 15px;
}

#path1-container {
     position: absolute;
     left: 102px;
     top: 104px;
}

#Path_1 {
     stroke-dasharray: 500;
     stroke-dashoffset: 500;
}