.spPicturePlayer{}
/*.spSepBar
{
   background-image : url(/download/Resource/BGImage/fiveStarsDepthYellow.svg); 
   background-repeat: repeat-x;
   background-position: center;
   height : 50px;
   width : 50%;
   margin : 2em auto;
}*/
.spStars
{
  background-image : url(/download/Resource/BGImage/meteorShower.jpg);
  background-attachment: fixed;
  background-size: cover;
}
.spRestrictWidth
{
  background-image : url(/download/Resource/BGImage/star002.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom left;
  background-clip: content-box;
  
  padding-top : 2em;
  padding-bottom : 2em;
  
  display : flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
 
}

.spOtherItems
{
  
}
.spCampusTv
{

}

.spSchoolFeature{}
.spBlockTitle
{
  text-align : center;
  font-size : 2.5rem;
  font-weight : 900;
}
.spUsefulWebsite
{
  padding : 2em 0;
}

@media (max-width: 480px) 
{
  .spRestrictWidth
  {
    display : block;
    padding-left : 5vw;
    padding-right : 5vw;
  }
}
@media (min-width: 481px) and (max-width: 767px) 
{
  .spRestrictWidth
  {
    display : block;
    padding-left : 5vw;
    padding-right : 5vw;
  }
}
@media (min-width: 768px) and (max-width: 979px) 
{
  .spRestrictWidth
  {
    display : block;
    padding-left : 5vw;
    padding-right : 5vw;
  }
}
@media (min-width: 980px) and (max-width:1199px) 
{
  .spRestrictWidth
  {
    display : block;
    padding-left : 5vw;
    padding-right : 5vw;
  }
}
@media (min-width: 1200px) and (max-width:1919px) 
{
  .spRestrictWidth
  {
    padding-left : 5vw;
    padding-right : 5vw;
  }
  .spOtherItems
  {
    flex-basis : 80%;
    width : 80%;
  }
  .spCampusTv
  {
    flex-basis : 20%;
    width : 20%;
  }
}
@media (min-width: 1920px) 
{
  .spRestrictWidth
  {
    padding-left : 10vw;
    padding-right : 10vw;
  }
  .spOtherItems
  {
    flex-basis : 80%;
    width : 80%;
  }
  .spCampusTv
  {
    flex-basis : 20%;
    width : 20%;
  }
}